h5的canvas绘制方格(边框随即色)
文章地址 https://www.cnblogs.com/sandraryan/
两个循环绘制
<body>
<canvas id="cv" width="800" height="500"></canvas>
<script>
var cv = document.querySelector('#cv');
var ctx = cv.getContext('2d');
ctx.beginPath();
// 绘制水平线,起始点x坐标都为0,结束点x坐标都为宽度
// y坐标从50开始,每次累加50
ctx.lineWidth = .2;
for(var i = 1; i < 500/50; i++){
ctx.moveTo(0,i*50);
ctx.lineTo(800,i*50);
}
ctx.stroke(); // 竖直方向,起始点y坐标都是0,终止点y都是高度,累加50
ctx.beginPath();
for(var j = 0; j < 800/50; j++){
ctx.moveTo(50*j,0);
ctx.lineTo(50*j,500);
}
ctx.stroke();
</script>
</body>
效果图
代码优化:
var cv = document.querySelector('#cv');
var ctx = cv.getContext('2d');
ctx.beginPath();
for(var i = 0; i < 800/50; i++){
// 竖直线
ctx.moveTo(50*i,0);
ctx.lineTo(50*i,500);
// 水平线
// 如果水平线绘制完毕,就没必要继续嗲用moveTo 和lineTo
if(i> 500/50){
continue;
}
ctx.moveTo(0,i*50);
ctx.lineTo(800,i*50);
}
ctx.stroke();
效果同上
h5的canvas绘制方格(边框随即色)的更多相关文章
- h5学习-canvas绘制矩形、圆形、文字、动画
绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- h5 的canvas绘制基本图形
文章地址:https://www.cnblogs.com/sandraryan/ canvas是一个标签,可用于绘制复杂图形,渲染效果比普通DOM快 某些低版本浏览器不支持 canvas 使用原生几乎 ...
- H5 canvas绘制出现模糊的问题
在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...
- canvas绘制圆心扇形可组成颜色随机的七色小花
啊~现在应该还是春天吧.心情一如既往的烦闷呐.最近做了一个canvas的扇形绘制的东西.把它整理出来变成一个适合春天的花朵绘制~沉闷的工作环境已经让我这种有趣的人也变成了无聊鬼怪呢.下次一定想找一个年 ...
- 教你制作挂件头像 | 小程序七十二变之 canvas 绘制国旗头像
昨天朋友圈被「请给我一面国旗@微信官方」刷屏,虽然知道是假的,但是从另一个角度来看,弄清楚如何实现更有趣. 1.canvas 这就不得不提到小程序中的 API canvas,H5 中也是有 canva ...
- canvas绘制线和矩形
###canvas绘制矩形 HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形: ----> ...
- H5使用Canvas绘图
一.什么是Canvas Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的 ...
- [canvas]利用canvas绘制自适应的折线图
前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...
- 使用canvas绘制时钟
使用canvas绘制时钟 什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
随机推荐
- 由一道面试题引起的arguments的思考
写一个按照下面方式调用都能正常工作的 sum 方法 console.log(sum(2,3)); // Outputs 5 console.log(sum(2)(3)); // Outputs 5从这 ...
- 运行Jmeter时,响应数据中文乱码问题解决办法
需要修改jmeter中的配置,在Jmeter安装目录/bin/jmeter.properties文件中进行修改: sampleresult.default.encoding默认为ISO-8859-1, ...
- MR25H10-1Mb密度SPI串行接口MRAM
everspin的MR25H10是一个1,048,576位磁阻随机存取存储器(MRAM)设备,由131,072个8位字组成.MR25H10提供串行EEPROM和串行闪存兼容的读/写时序,没有写延迟,并 ...
- KMLLayer
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- JavaScript:利用递归实现对象深拷贝
先来普及一下深拷贝和浅拷贝的区别浅拷贝:就是简单的复制,用等号即可完成 let a = {a: 1} let b = a 这就完成了一个浅拷贝但是当修改对象b的时候,我们发现对象a的值也被改变了 b. ...
- WinForm 实现主程序(exe)与其关联类库(*.dll)分开存放
WinForm 实现主程序(exe)与其关联类库(*.dll)分开存放 开发环境: Microsoft Windows 7 SP1 Microsoft.NET Framework 4.0 ( ...
- 2019.11.12htmlhomework1
ex: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- webpack配置vue项目
npm init 安装webpack,webpack-cli 新建src目录,在src目录下新建main.js
- bzoj1231 混乱的奶牛
Description 混乱的奶牛 [Don Piele, 2007] Farmer John的N(4 <= N <= 16)头奶牛中的每一头都有一个唯一的编号S_i (1 <= S ...
- 我的iOS高效编程秘诀—坚持编程习惯
http://www.cocoachina.com/programmer/20150819/13103.html 作者:sunljz 授权本站转载. 习惯会影响一个人做事的方式,也会直接影响效率.我经 ...