注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

Html5 Canvas (4)曲线  

2011-03-31 20:28:32|  分类: Html5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

曲线

曲线函数  arc(x, y, radius, startAngle, endAngle, anticlockwise)

参数   x,y 圆心坐标 r 为半径 startAngle 起始角度 endAngle 结束角度 anticlockwise 顺时针还是逆时针

实例

  Html5 Canvas (4)曲线 - zhenghaoju700 - zhenghaoju700 的博客?

CODE

<!DOCTYPE HTML>

<html>

<head>

<title>Html5 Canvas arc</title>

</head>

<body>

<canvas id="c" height="1000" width="700"></canvas>

<script type="text/javascript">

var c = document.getElementById('c');//取得Dom元素

    var context = c.getContext("2d");//拿到Canvas的上下文 目前好像只支持2D渲染

context.strokeStyle = "#000000";//填充颜色

//曲线

context.beginPath();

context.arc(200,200,40,0,Math.PI*2,true);

context.closePath();

context.stroke();

context.beginPath();

context.arc(200,300,40,0,Math.PI,true);

context.closePath();

context.stroke();

context.beginPath();

context.arc(200,400,40,Math.PI/2,Math.PI,false);

context.closePath();

context.stroke();

context.beginPath();

context.arc(200,500,40,Math.PI/2,Math.PI,true);

context.closePath();

context.stroke();

</script>

</body>

</html>

 

贝塞尔曲线 二次和三次

什么是贝塞尔曲线 ?

quadraticCurveTo(cp1x, cp1y, x, y)  参考点(cp1x,cp2y) 结束点(x,y)

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 两个参考点 和 结束点

详细讲解 见 mozilla.org

  评论这张
 
阅读(275)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017