用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 渐变(Gradients)之CSS3 线性渐变
Jul 08 HTML / CSS
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
CSS3 透明色 RGBA使用介绍
Aug 06 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
May 11 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 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版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
Python随机生成带特殊字符的密码
2016/03/02 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
青春励志演讲稿
2014/04/29 职场文书
汽车维修求职信
2014/06/15 职场文书
亮剑观后感500字
2015/06/05 职场文书
创业计划之特色精品店
2019/08/12 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
Java死锁的排查
2022/05/11 Java/Android
MySql数据库触发器使用教程
2022/06/01 MySQL