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“京胜杯”程序设计大赛_A_砝码称重
砝码称重 Time Limit: 1000 MS Memory Limit: 65536 KB Total Submissions: 61 Accepted: 37 Description 小明非常喜 ...
WebServices客户端代码生成
方式一: 官网下载cxf运行包:http://cxf.apache.org/download.html axis2:http://axis.apache.org/axis2/java/core/dow ...
linux下scrapy环境搭建
最近使用scrapy做数据挖掘,使用scrapy定时抓取数据并存入MongoDB,本文记录环境搭建过程以作备忘 OS:ubuntu 14.04 python:2.7.6 scrapy:1.0.5 D ...
TCP/IP小记
--TCP/IP小记 -----------------2014/06/11 TCP的要求是:local_ip:local_port <==>remote_ip:remote_port这个 ...
Oracle联机日志损坏解决办法
关于此问题,在网上找到一篇不错的文章. 大家都清楚,联机日志分为当前联机日志和非当前联机日志. ---------------------------------------------------- ...
Ubuntu无法访问windows分区
正常情况: 重启, 先进入windows, 再重启进入Ubuntu(一定是重启, 先关机再进Ubuntu没用). 异常情况: sudo ntfsfix /dev/sda5(或6或7,得看哪个盘无法访问 ...
开源一款iOS中国地图行政区控件（含一级与二级行政区）
开源一款iOS版中国省市级地图行政区的控件,该组件可以支持拖动.缩放以及全国省和市级行政区的点选,主要适用于iPad,如果要在iPhone上使用,一些细节可能得做相关调整. 该地图组件实现起来不难,数 ...
phoenix常用命令
1.登录命令 ./sqlline.py localhost:2181:/hbase-unsecure span { font-family: "Courier New"; font ...
JS中几种常见的数组算法（前端面试必看）
JS中几种常见的数组算法 1.将稀疏数组变成不稀疏数组 /** * 稀疏数组变为不稀疏数组 * @params array arr 稀疏数组 * @return array 不稀疏的数组 */ f ...
网络与WEB 编程
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Helvetica; color: #29556f } 作为客户端与HTTP 服务交互问题: ...

HTML5 贝塞尔绘画 桃心