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画圆及点阵的使用相关推荐

canvas笔记-扩展canvas的context及画椭圆及浏览器兼容问题
首先是扩展canvas的context 比如扩展一个画五角星的代码 <!DOCTYPE html> <html lang="en"> <head> ...
canvas笔记-使用canvas画矩形及各样式（透明）
程序运行截图如下: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
canvas笔记-在canvas中使用其他HTML元素
这里使用的原理是使用css把div中关于html的元素通过布局位置,以及透明相关的设置,将其设置到canvas上,这样看起来就是在canvas绘制的按钮.然后使用JavaScript获取按钮的数据或者 ...
html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图
HTML5 Canvas绘图绘制太极图太极图 * { padding: 0; margin: 0; } body { } #myCanvas { background-color: #eee; } ...
canvas画条形图微信小程序_小程序-引入 echart 图表画圆饼图
前言在 web 中引入echart可视化图表是很常见的操作,那在小程序当中又如何引入使用呢示例效果完整示例效果-可以点击此处查看下载使用 ec-canvas 在github上下载echarts ...
canvas画圆又毛边
canvas画圆又毛边 canvas使用arc()画园有毛边,如图:,只需给其添加width,height即可,直接上代码 <!DOCTYPE html> <html lang=&q ...
php画圆锯齿,优雅的解决canvas画圆锯齿问题
canvas 解决canvas画圆锯齿问题之前做一各项目需要画一个饼图,于是使用HTML5的canvas元素画出来的.一看在移动端手机上测试都发现画图有一点锯齿明显问题, 1 效果如下代码如下 v ...
H5 canvas 画圆画圆角
canvas是H5的一大重点我们来学一下如何用canvas画圆画圆 arc(x,y,r,起始弧度,结束弧度,顺逆时针) x,y就是这个圆的圆心坐标 r是圆的半径弧度单位用Math.PI 顺逆时针 ...
canvas画圆和线条动画
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...

canvas笔记-使用canvas画圆及点阵的使用

canvas笔记-使用canvas画圆及点阵的使用相关推荐

最新文章

热门文章