用html5的canvas画布绘制贝塞尔曲线完整代码


Posted in HTML / CSS onAugust 14, 2013

查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm
完整代码:

复制代码
代码如下:

<!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>
<title>用html5的canvas画布绘制贝塞尔曲线</title>
</head>
<body>
<div>
<a href="http://keleyi.com/a/bjac/j77m9131.htm" target="_blank">原文</a></div>
<canvas id="keleyi_com" height="300" width="400"></canvas>
<script type="text/javascript">
function draw(id)
{
var canvas=document.getElementById(id);
if(canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#eeeeff";
context.fillRect(0,0,400,300);
var n=0;
var dx=150;
var dy=150;
var s=100;
context.beginPath();
context.globalCompositeOperation='and';
context.fillStyle='rgb(100,255,100)';
context.strokeStyle='rgb(0,0,100)';
var x=Math.sin(0);
var y=Math.cos(0);
var dig=Math.PI/15*11;
for(var i=0;i<30;i++)
{
var x=Math.sin(i*dig);
var y=Math.cos(i*dig);
context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
}
context.closePath();
context.fill();
context.stroke();
}
draw("keleyi_com");
</script>
</body>
</html>
HTML / CSS 相关文章推荐
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 HTML / CSS
css弧边选项卡的项目实践
May 07 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 #HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 #HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 #HTML / CSS
HTML5的语法变化介绍
Aug 13 #HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 #HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 #HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 #HTML / CSS
You might like
php 什么是PEAR?(第三篇)
2009/03/19 PHP
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
PHP7.0版本备注
2015/07/23 PHP
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
编程语言Python的发展史
2014/09/26 Python
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
快速了解Python中的装饰器
2018/01/11 Python
python3 拼接字符串的7种方法
2018/09/12 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
自荐信需注意事项
2014/01/25 职场文书
公司请假条格式
2014/04/11 职场文书
大学迎新标语
2014/06/26 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
学术会议领导致辞
2015/07/29 职场文书
七年级思品教学反思
2016/02/20 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL