canvas笔记-使用arc与lineTo画圆角矩形及绘制2048棋盘
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-使用arc与lineTo画圆角矩形及绘制2048棋盘
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
首先是使用arc圓所對(duì)應(yīng)的參數(shù)為（默認(rèn)為順時(shí)針）：
這里話矩形的話，對(duì)應(yīng)的圓心頂點(diǎn)坐標(biāo)為：
程序運(yùn)行截圖如下：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當(dāng)前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");drawRoundRect(context, 100, 100, 600, 500, 50);}function drawRoundRect(cxt, x, y, width, height, radius){cxt.save();cxt.translate(x, y);pathRoundRect(cxt, width, height, radius);cxt.strokeStyle = "black";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();}</script></body> </html>這里先使用translate把坐標(biāo)原點(diǎn)移動(dòng)到指定的位置。
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, 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();封口，也就是畫最右邊的那條邊。
?
?
下面是畫一個(gè)2048的棋盤
程序運(yùn)行截圖如下；
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當(dāng)前瀏覽器不支持canvas </canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");fillRoundRect(context, 150, 150, 500, 500, 10, "#bbada0");for(let i = 0; i < 4; i++){for(let j = 0; j < 4; j++){fillRoundRect(context, 170 + i * 120, 170 + j * 120, 100, 100, 6, "#ccc0b3");}}}function fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor){if(2 * radius > width || 2 * radius > height){return;}cxt.save();cxt.translate(x, y);pathRoundRect(cxt, width, height, radius);cxt.fillStyle = fillColor || "black";cxt.fill();cxt.restore();}function strokeRoundRect(cxt, x, y, width, height, radius, /*optional*/lineWidth, /*optional*/strokeColor){if(2 * radius > width || 2 * radius > height){return;}cxt.save();cxt.translate(x, y);pathRoundRect(cxt, width, height, radius);cxt.lineWidth = lineWidth || 1;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();}</script></body> </html>這里就是先畫了個(gè)大矩形，然后再大矩形下面畫下矩形。
?
總結(jié)
以上是生活随笔為你收集整理的canvas笔记-使用arc与lineTo画圆角矩形及绘制2048棋盘的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： canvas笔记-使用canvas画矩形
- 下一篇： Python笔记-获取某百科页面所有UR