贝塞尔曲线 ：它可以是二次和三次方的形式，一般用于绘制复杂而有规律的形状。 方法： quadraticCurveTo(cp1x, cp1y, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
参数 x 和 y 是终点坐标，cp1x 和 cp1y 是第一个控制点的坐标，cp2x 和 cp2y 是第二个的。 用贝塞尔曲线绘制聊天气泡说明 用贝塞尔曲线绘制聊天气泡
代码 <html> <head> <!--[if IE]> <script type="text/javascript" src="excanvas.js"></script> <script type="text/javascript" src="excanvas.compiled.js"></script> <![endif]--> <script type="text/javascript"> function draw() { var canvas = document.getElementById("cv"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.moveTo(75,25); ctx.quadraticCurveTo(25,25,25,62.5); ctx.quadraticCurveTo(25,100,50,100); ctx.quadraticCurveTo(50,120,30,125); ctx.quadraticCurveTo(60,120,65,100); ctx.quadraticCurveTo(125,100,125,62.5); ctx.quadraticCurveTo(125,25,75,25); ctx.stroke(); } } </script> <title>用贝塞尔曲线绘制聊天气泡</title> </head> <body onload="draw();" > <canvas id="cv" width="150" height="150"> </canvas> </body> </html>
效果
用贝塞尔曲线绘制爱心说明 用贝塞尔曲线绘制爱心
代码 <html> <head> <!--[if IE]> <script type="text/javascript" src="excanvas.js"></script> <script type="text/javascript" src="excanvas.compiled.js"></script> <![endif]--> <script type="text/javascript"> function draw() { var canvas = document.getElementById("cv"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill(); } } </script> <title>用贝塞尔曲线绘制爱心</title> </head> <body onload="draw();" > <canvas id="cv" width="150" height="150"> </canvas> </body> </html>
效果
绘制圆角矩形(自定义方法)function roundedRect(ctx,x,y,width,height,radius){ ctx.beginPath(); ctx.moveTo(x,y+radius); ctx.lineTo(x,y+height-radius); ctx.quadraticCurveTo(x,y+height,x+radius,y+height); ctx.lineTo(x+width-radius,y+height); ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius); ctx.lineTo(x+width,y+radius); ctx.quadraticCurveTo(x+width,y,x+width-radius,y); ctx.lineTo(x+radius,y); ctx.quadraticCurveTo(x,y,x,y+radius); ctx.stroke(); } |
京ICP备14042305号
html5star team © 2012-2013 html5星空 Comsenz Inc.
GMT+8, 2020-9-22 23:24 , Processed in 0.104385 second(s), 29 queries .
