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是一个圆,这里的圆其实是由四块 ...

随机推荐

2016 "Bird Cup" ICPC7th@ahstu--“波导杯”安徽科技学院第七届程序设计大赛
"波导杯"安徽科技学院第七届程序设计大赛 Contest - 2016 "Bird Cup" ICPC7th@ahstu Start time: 2016-0 ...
Hello world！ My first blog！
Hello world! My first blog!
打鼹鼠 HNOI 2004
动态规划题从题目中可以发现是一个时间递增的过程,所以只要是在后面的点都是后出现的,换句话说,在条件达成时,前面的点可以到达后面的点,求最长的一条链,非常的像LIS(最长上升子序列),只要将 f[i]& ...
社交系统ThinkSNS+ APP更新至V0.8.3---新增打赏、用户认证
一.ThinkSNS简介目前社交系统ThinkSNS(简称TS)有两个版本并行: ThinkSNS V4----最新版本ThinkSNS V4.6.1,第一次发布时间为2015年7月15日,最近更新 ...
社群系统ThinkSNS V4.5.29 APP更新发布，新增用户认证及系统消息
社群系统ThinkSNS V4版本移动端APP将于7月29日更新发布,本次更新修复部分bug,最主要是增加了移动端APP的用户认证功能,以及添加了系统消息,为V4.5.29版本发布.这两个功能PC端的 ...
mysql shutdown and kill
--mysqladmin shutdown If you execute mysqladmin shutdown when connecting to a local server using a U ...
云计算之openstack mitaka 配置详解（将疑难点都进行划分）
在配置openstack项目时很多人认为到处是坑,特别是新手,一旦进坑没有人指导,身体将会感觉一次次被掏空,作为菜鸟的我也感同身受,因为已经被掏空n次了. 以下也是我将整个openstack配置过程进 ...
利用JS做网页特效——大图轮播
大图轮播完整流程代码操作: <style> * { margin: 0px; padding: 0px; ...
c++类大小问题
1.空类 class A { }; 解析:类的实例化就是为每个实例在内存中分配一块地址:每个类在内存中都有唯一的标识,因此空类被实例化时,编译器会隐含地为其添加一个字节,以作区分. 2.虚函数类 cl ...
配置Tomcat
目前有很多网站使用jsp的程序编写,所以解析jsp的程序就必须要有相关的软件来完成.Tomcat就是用来解析jsp程序的一个软件. 安装tomcat Tomcat的安装分为两个步骤:安装JDK和安装T ...

HTML5 贝塞尔绘画 桃心