canvas笔记-使用canvas画圆及点阵的使用
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-使用canvas画圆及点阵的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
如下例子：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" width="1024" height="768" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function () {let canvas = document.getElementById("canvas");let context = canvas.getContext("2d");context.lineWidth = 5;context.strokeStyle = "#005588";context.arc(300, 300, 200, 0.5 * Math.PI, 1.5 * Math.PI, true);context.stroke();} </script></body> </html>程序運行截圖如下：
這里首先要介紹一個函數：arc()他的參數依此如下：
arc(圓心X軸,?圓心Y軸,?圓半徑,?畫圓的起始位置,?畫圓的結束位置,?最后是個缺省值默認是false為逆時針畫圓)
arc中畫起始位置和結束位置填寫xxpi就可以了。
?
如果要封口如下面的效果：
需要將其進行beginPath()及closePath()即可
代碼如下:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" width="1024" height="768" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function () {let canvas = document.getElementById("canvas");let context = canvas.getContext("2d");context.lineWidth = 5;context.strokeStyle = "#005588";context.beginPath();context.arc(300, 300, 200, 0.5 * Math.PI, 1.5 * Math.PI, true);context.closePath();context.stroke();} </script></body> </html>再如下的例子
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" width="1024" height="768" style="border: 1px solid #aaa; display: block; margin: 50px auto;">當前瀏覽器不支持canvas </canvas><script>window.onload = function () {let canvas = document.getElementById("canvas");let context = canvas.getContext("2d");context.lineWidth = 5;context.strokeStyle = "#005588";for(let i = 0; i < 10; i++){context.beginPath();context.arc(50 + i * 100, 60, 40, 0, 2 * Math.PI * (i + 1) / 10);context.closePath();context.stroke();}} </script></body> </html>下面是點陣相關的例子，
截圖如下：
源碼如下：
test.js
;digit = [[[0, 0, 1, 1, 1, 0, 0],[0, 1, 1, 0, 1, 1, 0],[1, 1, 0, 0, 0, 1, 1],[1, 1, 0, 0, 0, 1, 1],[1, 1, 0, 0, 0, 1, 1],[1, 1, 0, 0, 0, 1, 1],[1, 1, 0, 0, 0, 1, 1],[1, 1, 0, 0, 0, 1, 1],[0, 1, 1, 0, 1, 1, 0],[0, 0, 1, 1, 1, 0, 0]]];let WINDOW_WIDTH = 1024; let WINDOW_HEIGHT = 768; let RADIUS = 8; let MARGIN_TOP = 60; let MARGIN_LEFT = 30;window.onload = function () {let canvas = document.getElementById("canvas");let context = canvas.getContext("2d");canvas.width = WINDOW_WIDTH;canvas.height = WINDOW_HEIGHT;render(context); }function render(cxt) {let zero = 0;cxt.fillStyle = "rgb(0, 102, 153)";for(let i = 0; i < digit[0].length; i++){for(let j = 0; j < digit[0][i].length; j++){if(digit[0][i][j] == 1){cxt.beginPath();cxt.arc(MARGIN_TOP + j * 2 * (RADIUS + 1) + (RADIUS + 1), MARGIN_LEFT + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);cxt.closePath();cxt.fill();}}} }canvas2.html
<!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;">當前瀏覽器不支持canvas </canvas><script src="js/test.js"></script></body> </html>這里有一點要提醒的也就是最大的問題是畫點陣的圓心坐標
如下面這個點陣：
[0, 0, 1, 1, 1, 0, 0],[0, 1, 1, 0, 1, 1, 0],[1, 1, 0, 0, 0, 1, 1],[1, 1, 0, 0, 0, 1, 1],[1, 1, 0, 0, 0, 1, 1],[1, 1, 0, 0, 0, 1, 1],[1, 1, 0, 0, 0, 1, 1],[1, 1, 0, 0, 0, 1, 1],[0, 1, 1, 0, 1, 1, 0],[0, 0, 1, 1, 1, 0, 0]如:
i表示橫軸，
j表示縱軸，
R為圓的半徑，
R+1為比半徑多1點的空格，讓每個圓都獨立，
那么第(i,?j)個圓的圓心位置：
centerX：j * 2 * (R + 1) + (R + 1) centerY：i * 2 * (R + 1) + (R + 1)如果要搞一排的點陣，只需將centerX平移下，將centerY平移下，如
centerX：100 + j * 2 * (R + 1) + (R + 1) centerY：200 + i * 2 * (R + 1) + (R + 1)?
總結
以上是生活随笔為你收集整理的canvas笔记-使用canvas画圆及点阵的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java笔记-解决java.lang.C
- 下一篇： Linux笔记-Centos7.6安装Q