用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美化HTML表单的技巧演示
May 17 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
html5 分层屏幕适配的方法
Mar 16 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
html解决浏览器记住密码输入框的问题
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
推荐一篇入门级的Class文章
2007/03/19 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
限制复选框的最大可选数
2006/07/01 Javascript
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
C#笔试题
2015/07/14 面试题
物流毕业生个人的自我评价
2014/02/13 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
生产现场禁烟通知
2015/04/23 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
加薪申请报告范本
2015/05/15 职场文书