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("https://cdn.jxasp.com:9143/image/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("https://cdn.jxasp.com:9143/image/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("https://cdn.jxasp.com:9143/image/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("https://cdn.jxasp.com:9143/image/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画圆及点阵的使用

详情内容

相关技术文章

最新源码

下载排行榜

提示信息

选择支付方式