HTML5——Canvas_03之【使用bezierCurveTo绘制贝塞尔曲线】
2018-06-04 13:29
274 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>使用bezierCurveTo绘制贝塞尔曲线</title> <script> function draw(id){ var canvas=document.getElementById(id); if(canvas==null) { return false; } var context=canvas.getContest("2d"); context.fillRect(0,0,300,400); var dx=150; var dy=150; var s=100; context.beginPath(); context.fillStyle="rgb(100,255,100)"; var x=Math.sin(0); var y=Math.cos(0); var dig=Math.PI/15*11; context.moveTo(dx,dy);//设置原点位置,开始点 for(var i=0;i<30;i++) { var x=Math.sin(i*dig); var y=Math.cos(i*dig); //moveTo(dx,dy);//设置原点位置,开始点 //控制点1:dx+x*s,dy+y*s-100 //控制点2:dx+x*s+100,dy+y*s //结束点:dx+x*s,dy+y*s context.bezierVurveTo(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();
} </script> </head>
<body onload="draw("canvas");"> <canvas id="canvas" width="300" height="400"></canvas></body>
</html> 阅读更多
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>使用bezierCurveTo绘制贝塞尔曲线</title> <script> function draw(id){ var canvas=document.getElementById(id); if(canvas==null) { return false; } var context=canvas.getContest("2d"); context.fillRect(0,0,300,400); var dx=150; var dy=150; var s=100; context.beginPath(); context.fillStyle="rgb(100,255,100)"; var x=Math.sin(0); var y=Math.cos(0); var dig=Math.PI/15*11; context.moveTo(dx,dy);//设置原点位置,开始点 for(var i=0;i<30;i++) { var x=Math.sin(i*dig); var y=Math.cos(i*dig); //moveTo(dx,dy);//设置原点位置,开始点 //控制点1:dx+x*s,dy+y*s-100 //控制点2:dx+x*s+100,dy+y*s //结束点:dx+x*s,dy+y*s context.bezierVurveTo(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();
} </script> </head>
<body onload="draw("canvas");"> <canvas id="canvas" width="300" height="400"></canvas></body>
</html> 阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5 Canvas ( 贝塞尔曲线, 一片星空加绿地 ) quadraticCurveTo, bezierCurveTo
- html5使用canvas绘制文字特效
- 用html5的canvas画布绘制贝塞尔曲线
- HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
- 使用HTML5中的canvas绘制灰太狼图像
- HTML5 Canvas 绘图――使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
- HTML5学习笔记之使用canvas绘制矩形
- html5 canvas 绘制贝塞尔曲线
- 用html5的canvas画布绘制贝塞尔曲线完整代码
- html5学习笔记---03. Canvas简介,Canvas的使用方法
- HTML5中使用canvas绘制复杂图形
- HTML5中使用canvas绘制圆形
- HTML5利用Canvas绘制图形(使用图像、裁剪区域、使用文本。阴影效果和操作像素)
- 使用HTML5 Canvas API绘制弧线的教程
- HTML5 JS Canvas利用贝塞尔曲线绘制圆角矩形
- HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
- html5使用canvas标签绘制简单的时钟
- 第一讲：使用html5——canvas绘制奥运五环
- 使用html5 canvas绘制图片
- HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制