HTML5 贝塞尔绘画 桃心
2016-07-06 17:09
495 查看
<!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>
效果图:
相关文章推荐
- HTML5新特性之-—视频
- 利用简洁的图片预加载组件提升h5移动页面的用户体验
- HTML5属性placeholder,支持IE6、7、8浏览器
- 集成支付宝H5支付
- 文本框 12种炫酷HTML5 SVG和CSS3表单浮动标签特效
- 多功能用途 Gooey Effects 7种炫酷HTML5 SVG液态水滴融合动画特效
- HTML5实现全屏API【进入和退出全屏】
- ie8 支持html5 标签及ie8 中jQ版本兼容性问题
- swiper的基础使用(二十一)
- HTML5 web存储—web storage
- html5自带表单验证-美化改造
- swiper的基础使用(十六)
- HTML5 谨以此文献给那些即将毕业的程序员
- 一款靓丽的html5后台管理模板代码下载,适合开发者进行后台数据开发
- HTML5-表格元素
- HTML5的Video标签的属性,方法和事件汇总
- HTML5 Select标签基本使用
- Chrome中利用HTML5实现具有文件“编辑”及“下载”功能的本地应用
- HTML5响应式导航
- HTML5 Canvas动画效果实现原理