HTML5 贝塞尔绘画桃心

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>贝塞尔法画桃心</title>

</head>

<body>

    <canvas id="mycavas" width="300" height="300" > </canvas>

    <script type="application/javascript" >

    var canvas = document.getElementById("mycavas");

    var context = canvas.getContext("2d");

    context.beginPath();

    context.fillStyle="#c00";

    context.moveTo(75,40)

    //左半边的桃心，从凹进去的地方开始画

    context.bezierCurveTo(75,37,70,25,50,25);

    context.bezierCurveTo(20,25,20,62.5,20,62.5);

    context.bezierCurveTo(20,80,40,102,75,120);

    //右半边的桃心，从桃心尖尖部分开始画

    context.bezierCurveTo(110,102,130,80,130,62.5);

    context.bezierCurveTo(130,62.5,130,25,100,25);

    context.bezierCurveTo(85,25,75,35,75,40);

    context.stroke();

    context.fill();

    </script>

</body>

</html>

效果图：

aaarticlea/png;base64,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" alt="" />

HTML5 贝塞尔绘画桃心的更多相关文章

html5 canvas绘画时钟
本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...
html5 css3新特性了解一下
html5: 用于绘画的 canvas 元素以及SVG 用于媒介回放的 video 和 audio 元素拖拽(Drag 和 drop) 地理定位(Geolocation) 对本地离线存储的更好的支 ...
HTML5、CSS3等新特性:
HTML5:1/绘画 canvas 元素;2/用于媒介回放的 video 和 audio 元素;3/本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;4/sessionSt ...
用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)
之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...
html5 canvas贝塞尔曲线篇(下)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
html5 canvas贝塞尔曲线篇(上)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
求帮助 html5三次贝塞尔曲线问题
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>can ...
Android -- 贝塞尔使圆渐变为桃心
1,我们上一篇介绍了贝塞尔曲线推到原理和在Android里的简单使用,今天就和来写写贝塞尔曲线的实际应用,今天实现的效果图如下: 2,思路分析我们知道首先我们的view是一个圆,这里的圆其实是由四块 ...

随机推荐

string::npos，一个很大的数
string::npos,这是一个很大的数 npos 是这样定义的: static const size_type npos = -1; 因为 string::size_type (由字符串配置器 a ...
CTF比赛中SQL注入的一些经验总结
ctf中sql注入下的一些小技巧最近花了一点时间总结了各大平台中注入的trick,自己还是太菜了,多半都得看题解,就特此做了一个paper方便总结注释符以下是Mysql中可以用到的单行注释符: ...
ASP.NET Core - Razor页面之Handlers处理方法
简介在前一篇文章中,我们讨论了Razor页面.今天我们来谈谈处理方法(Handlers). 我们知道可以将代码和模型放在 .cshtml 文件里面或与 .cshtml 匹配的 .cshtml.cs ...
python 导入模块 import 理解
--python 导入模块 import 理解 -----------------------------------2014/03/18 python 导入一个模块的过程要求有一个叫做“路径搜索”的 ...
python ——面向对象进阶
1.staticmethod和classmethod staticmethod 静态方法: 让类里的方法,直接被类调用,就像正常的函数一样宝宝,男博博,女海娇,男海燕,女海东,男海峰,男 ...
Obj-C 实现 QFileDialog函数
Obj-C 实现 QFileDialog函数(getOpenFileName/getOpenFileNames/getExistingDirectory/getSaveFileName) 1.getO ...
Hexo快速部署教程
一直有建立博客的需要,使用过Wordpress动态博客,一直访问速度比较慢,刚开始以为是空间域名的解析的问题,尝试使用Hexo静态博客,部署后感觉速度正常很多,特意发文快速部署教程准备本文是在wi ...
关于InnoDB存储引擎text和blob类型的优化
我们在数据库优化的时候,看到一些表在设计上使用了text或者blob的字段,如果单表的存储空间达到了近上百G或者大几十G,这种情况再去改变和优化就非常难了一.简介为了清楚大字段对性能的影响,我们有 ...
css盒子边框样式
边框样式有全边框和单个边框样式,可对每条边设置不同的样式如下代码P1为全边框样式,P2为单个边框设置不同的样式: <!DOCTYPE html> <html lang=" ...
Luogu P3390 【模板】矩阵快速幂
题目背景矩阵快速幂题目描述给定n*n的矩阵A,求A^k 输入输出格式输入格式: 第一行,n,k 第2至n+1行,每行n个数,第i+1行第j个数表示矩阵第i行第j列的元素输出格式: 输出A^k ...

HTML5 贝塞尔绘画 桃心