Ch9 绘制标准圆弧

高级路径

• 标准圆弧：arc()
• 复杂圆弧：arcTo()
• 二次贝塞尔曲线：quadraticCurveTo()
• 三次贝塞尔曲线：bezierCurveTo()

<!DOCTYPE html><htmllang="zh"><head><metacharset="UTF-8"><title>新的画布</title><style>        body { background: url("./images/bg3.jpg") repeat;}#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }</style></head><body><divid="canvas-warp"><canvasid="canvas">        你的浏览器居然不支持Canvas？！赶快换一个吧！！</canvas></div><script>    window.onload =function(){var canvas = document.getElementById("canvas");        canvas.width =800;        canvas.height =600;var context = canvas.getContext("2d");        context.fillStyle ="#FFF";        context.fillRect(0,0,800,600);}</script></body></html>

使用arc()绘制圆弧

arc()的使用方法如下：

context.arc(x,y,radius,startAngle,endAngle,anticlockwise)

anticlockwise表示绘制的方法，是顺时针还是逆时针绘制。它传入布尔值，true表示逆时针绘制，false表示顺时针绘制，缺省值为false。

绘制圆角矩形

<!DOCTYPE html><htmllang="zh"><head><metacharset="UTF-8"><title>圆角矩形</title><style>        body { background: url("./images/bg3.jpg") repeat;}#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }</style></head><body><divid="canvas-warp"><canvasid="canvas">        你的浏览器居然不支持Canvas？！赶快换一个吧！！</canvas></div><script>    window.onload =function(){var canvas = document.getElementById("canvas");        canvas.width =800;        canvas.height =600;var context = canvas.getContext("2d");        context.fillStyle ="#FFF";        context.fillRect(0,0,800,600);        drawRoundRect(context,200,100,400,400,50);        context.strokeStyle ="#0078AA";        context.stroke();}function drawRoundRect(cxt, x, y, width, height, radius){        cxt.beginPath();        cxt.arc(x + radius, y + radius, radius,Math.PI,Math.PI *3/2);        cxt.lineTo(width - radius + x, y);        cxt.arc(width - radius + x, radius + y, radius,Math.PI *3/2,Math.PI *2);        cxt.lineTo(width + x, height + y - radius);        cxt.arc(width - radius + x, height - radius + y, radius,0,Math.PI *1/2);        cxt.lineTo(radius + x, height +y);        cxt.arc(radius + x, height - radius + y, radius,Math.PI *1/2,Math.PI);        cxt.closePath();}</script></body></html>

绘制2048游戏界面

<!DOCTYPE html><htmllang="zh"><head><metacharset="UTF-8"><title>2048游戏界面</title><style>        body { background: url("./images/bg3.jpg") repeat;}#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }</style></head><body><divid="canvas-warp"><canvasid="canvas">        你的浏览器居然不支持Canvas？！赶快换一个吧！！</canvas></div><script>    window.onload =function(){var canvas = document.getElementById("canvas");        canvas.width =800;        canvas.height =600;var context = canvas.getContext("2d");        context.fillStyle ="#FFF";        context.fillRect(0,0,800,600);        drawRoundRect(context,200,100,400,400,5);        context.fillStyle ="#AA7B41";        context.strokeStyle ="#0078AA";        context.stroke();        context.fill();for(var i =1; i <=4; i++){for(var j =1; j <=4; j++){                drawRoundRect(context,200+16* i +80*(i -1),100+16* j +80*(j -1),80,80,5);                context.fillStyle ="#CCBFB4";                context.strokeStyle ="#0078AA";                context.stroke();                context.fill();}}}function drawRoundRect(cxt, x, y, width, height, radius){        cxt.beginPath();        cxt.arc(x + radius, y + radius, radius,Math.PI,Math.PI *3/2);        cxt.lineTo(width - radius + x, y);        cxt.arc(width - radius + x, radius + y, radius,Math.PI *3/2,Math.PI *2);        cxt.lineTo(width + x, height + y - radius);        cxt.arc(width - radius + x, height - radius + y, radius,0,Math.PI *1/2);        cxt.lineTo(radius + x, height +y);        cxt.arc(radius + x, height - radius + y, radius,Math.PI *1/2,Math.PI);        cxt.closePath();}</script></body></html>