html5 canvas贝塞尔曲线篇(下)
2015-04-03 16:26
162 查看
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>html5 canvas贝塞尔曲线篇</title> <script src="js/modernizr.js"></script> </head> <body> <h1>html5 canvas贝塞尔曲线篇</h1> <script type="text/javascript"> window.addEventListener('load',eventWindowLoaded,false); function eventWindowLoaded(){ canvasApp(); } function canvasSupport(){ return Modernizr.canvas; } function canvasApp(){ if(!canvasSupport()){ return; }else{ var theCanvas = document.getElementById('canvas') var context = theCanvas.getContext("2d") } drawScreen(); function drawScreen(){ context.beginPath(); context.strokeStyle="red"; context.lineWidth=2; context.moveTo(150,0); context.bezierCurveTo(0,125,300,175,150,300); context.stroke(); context.closePath(); //创建多弧点的贝塞尔曲线 context.beginPath(); context.strokeStyle="black"; context.lineWidth=2; context.moveTo(0,150); //从0,150开始 context.bezierCurveTo(150,0,175,300,300,150); context.stroke(); context.closePath(); } } </script> <canvas id="canvas" width="500" height="500"> 你的浏览器无法使用canvas 你的支持是我最大的快乐!! </canvas> </body> </html>
这一篇主要是创建多弧点的贝塞尔曲线
(150,0),(175,300)
记得半年前我看着这2个点的位置看了半天都没反应过来
后来百度贝塞尔曲线的选取点才发现原来是多点的贝塞尔曲线的2个弧度坐标是用起始点和终点的弧度切线这样看的
如下图
相关文章推荐
- html5 canvas贝塞尔曲线篇(上)
- html5 canvas 实现折线图
- 玩转html5(四)----使用canvas画一个时钟(可以动的哦!)
- [HTML5 Canvas学习]绘制矩形
- 使用html5 canvas 随机生成无向图
- 基于HTML5 Canvas实现的图片马赛克模糊特效
- HTML5之CANVAS学习,实现抽奖转盘
- 纯JavaScript实现HTML5 Canvas六种特效滤镜示例
- html5 canvas绘图-刻度仪表盘的绘制
- HTML5_Canvas_属性、定义及方法
- HTML5 Canvas
- 提高HTML5 Canvas性能的技巧
- HTML5 Canvas 的事件处理---转
- Javascript HTML5 Canvas实现的一个画板
- HTML5 canvas 在线画笔绘图工具(一)
- HTML5开发之Canvas绘图之实战入门
- HTML5 Canvas 绘制旋转45度佛教万字
- HTML5 Canvas 绘制英国国旗
- HTML5-canvas实例:刮刮乐游戏