HTML5 Canvas学习笔记之详解弧线的绘制
2016-02-09 10:54
519 查看
Canvas翻译过来呢就是画布
所以Canvas的作用就是把网页当成一张画布,在其中画画——说实话H5中最令我感兴趣的就是Canvas了。
绘制一条线
绘制矩形
绘制圆
效果图:
arcTo()
弧度永远是从顺时针开始0,0.5pi ,1.0pi, 1.5pi, 2pi,不管anticlockwise等于多少,这些值永远不变。
运行截图
由此可见,1.5pi永远是上方的点
利用圆弧绘制圆角矩形
利用控制点(x1,y1),(x2,y2)。起始点不一定是(x0,y0),终点也不一定是(x2,y2)
可以尝试改变radius的值
radius=600
context.quadraticCurveTo(x1,y1,x2,y2)
指定起始点(x0,y0),终止点(x2,y2),控制点(x1,y1)
贝塞尔曲线和arcTo的含义其实类似,但是这里的起始点和终止点就是真正的起始点和终止点,所以画出的并不是真正的圆弧,而是曲线。
可以上http://tinyurl.com/html5quadratic
上查看,这里形象的展示了quadratic的用法
context.moveTo(x0,y0)
context.bezierCurveTo(x1,y1,x2,y2,x3,y3)
可以上查看演示
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html
该文章是学习了慕课网上Canvas绘图详解而总结的学习笔记
http://www.imooc.com/learn/185
感谢老师!
我的代码在https://github.com/daisyHawen/html5-canvas-stars.git
在其中展示了如何使用这些canvas基本属性,同时展示了一个实现绘制一片星空效果:
所以Canvas的作用就是把网页当成一张画布,在其中画画——说实话H5中最令我感兴趣的就是Canvas了。
在html中引入canvas
<canvas id="canvas" style="height:100%"> 当前浏览器不支持Canvas,请更换浏览器后再试 </canvas>
绘制一条线、矩形与圆弧
这里先说Canvas的几个属性:绘制一条线
绘制矩形
绘制圆
window.onload=function(){ var canvas=document.getElementById('canvas'); canvas.width=800; canvas.height=800; var context=canvas.getContext('2d'); context.beginPath(); context.moveTo(100,100);//从(100,100)点到(700,700)划一根直线 context.lineTo(700,700); context.lineWidth=5; //指定样式,直线宽度为5,直线的颜色为红色 context.strokeStyle="red"; context.stroke(); context.closePath();//必须closepath,不然下面会从这儿开始 //绘制矩形 context.beginPath(); context.moveTo(100,100); context.lineTo(700,700); context.lineTo(100,700); context.lineTo(100,100); context.lineWidth=5; context.strokeStyle="blue"; context.stroke(); context.fillStyle="grey";//设置填充样式 context.fill(); context.closePath(); //绘制圆弧 context.beginPath(); context.arc(300, 300, 200, 0, 1.5*Math.PI, false); //acr()的参数为(X,Y,R,) context.lineWidth=5; context.strokeStyle="#005"; context.stroke(); context.closePath(); }
效果图:
弧线的绘制
arc()arcTo()
acr() ,圆弧和圆角矩形
context.arc(centerX,centerY,radius,startingAngle,endingAngle,anticlockwise=false)弧度永远是从顺时针开始0,0.5pi ,1.0pi, 1.5pi, 2pi,不管anticlockwise等于多少,这些值永远不变。
window.onload=function(){ var canvas=document.getElementById('canvas'); canvas.width=800; canvas.height=800; var context=canvas.getContext('2d'); context.beginPath(); context.arc(300, 300,100, 0, 1.5*Math.PI, false); context.lineWidth=5; context.strokeStyle="#005"; context.stroke(); context.closePath(); context.beginPath(); context.arc(600, 300, 100, 0, 1.5*Math.PI, true);//逆时针 context.lineWidth=5; context.strokeStyle="#005"; context.stroke(); context.closePath(); }
运行截图
由此可见,1.5pi永远是上方的点
利用圆弧绘制圆角矩形
function drawRoundRect(cxt,x,y,width,height,radius){ cxt.save() cxt.translate(x,y) pathRoundRect(cxt,width,height,radius) cxt.stroke() cxt.restore() } function pathRoundRect(cxt,width,height,radius){ cxt.beginPath() cxt.arc(width-radius,height-radius,radius,0,Math.PI/2) cxt.lineTo(radius,height) cxt.arc(radius,height-radius,radius,Math.PI/2,Math.PI) cxt.lineTo(0,radius) cxt.arc(radius,radius,radius,Math.PI,Math.PI*3/2) cxt.lineTo(width-radius,0) cxt.arc(width-radius,radius,radius,Math.PI*3/2,Math.PI*2) cxt.closePath() }
arcTo()
context.arcTo(x1,y1,x2,y2,radius)利用控制点(x1,y1),(x2,y2)。起始点不一定是(x0,y0),终点也不一定是(x2,y2)
window.onload=function(){ var canvas=document.getElementById('canvas'); canvas.width=800; canvas.height=800; var context=canvas.getContext('2d'); context.beginPath() context.moveTo(150,150) context.arcTo(600,150,650,650,300) context.lineWidth=5 context.strokeStyle='red' context.stroke() context.beginPath() context.moveTo(150,150) context.lineTo(650,150) context.lineTo(650,650) context.lineWidth=5 context.strokeStyle='gray' context.stroke() }
可以尝试改变radius的值
radius=600
贝塞尔Bezier二次曲线
context.moveTo(x0,y0)context.quadraticCurveTo(x1,y1,x2,y2)
指定起始点(x0,y0),终止点(x2,y2),控制点(x1,y1)
贝塞尔曲线和arcTo的含义其实类似,但是这里的起始点和终止点就是真正的起始点和终止点,所以画出的并不是真正的圆弧,而是曲线。
可以上http://tinyurl.com/html5quadratic
上查看,这里形象的展示了quadratic的用法
贝塞尔三次曲线
拥有两个控制点,可以绘制花瓣、波浪效果等context.moveTo(x0,y0)
context.bezierCurveTo(x1,y1,x2,y2,x3,y3)
可以上查看演示
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html
该文章是学习了慕课网上Canvas绘图详解而总结的学习笔记
http://www.imooc.com/learn/185
感谢老师!
我的代码在https://github.com/daisyHawen/html5-canvas-stars.git
在其中展示了如何使用这些canvas基本属性,同时展示了一个实现绘制一片星空效果:
相关文章推荐
- HTML5开发移动web应用——Sencha Touch篇(11)
- HTML5开发移动web应用——SAP UI5篇(4)
- HTML5开发移动web应用——Sencha Touch篇(10)
- 离线安装CDH5集群及相关软件
- HTML5开发移动web应用——SAP UI5篇(3)
- html5 canvas画布
- HTML5开发移动web应用——Sencha Touch篇(9)
- Html5的新特性学习
- Html5 Egret游戏开发 成语大挑战(七)游戏逻辑和数据处理
- HTML5开发移动web应用——SAP UI5篇(2)
- HTML5开发移动web应用——Sencha Touch篇(8)
- h5宣传页制作过程中遇到的问题
- HTML5(九)canvas操作文字实例之转盘
- HTML5基础常识
- HTML5:表单
- HTML5开发移动web应用——Sencha Touch篇(7)
- 三天学会HTML5——SVG和Canvas的使用
- 移动开发
- 三天学会HTML5――SVG和Canvas的使用
- 三天学会HTML5——SVG和Canvas的使用