canvas 网格线,心形，线型圆弧

文章目录

• • • • 网格线
      • 心形
      • 对角线
      • 科技风圆弧

网格线

const canvas = document.getElementsByTagName('canvas')[0];//这么写是为了获取canvas ctx 属性方法推荐
const ctx = canvas.getContext('2d');const { offsetWidth, offsetHeight } = document.body;canvas.width = offsetWidth;
canvas.height = offsetHeight;for (let index = 0; index < offsetWidth; index += 100) {ctx.beginPath();ctx.moveTo(index, 0);ctx.lineTo(index, offsetHeight);ctx.strokeStyle = "#ddd";ctx.stroke();ctx.closePath();
}for (let index = 0; index < offsetHeight; index += 100) {ctx.beginPath();ctx.moveTo(0, index);ctx.lineTo(offsetWidth, index);ctx.strokeStyle = "#ddd";ctx.stroke();ctx.closePath();
}

心形

const canvas = document.getElementsByTagName('canvas')[0];//这么写是为了获取canvas ctx 属性方法推荐
const ctx = canvas.getContext('2d');const accuracy = 50;//渲染精度function drawHeart(x, y, r) {ctx.save();//保存 rotate translate 状态ctx.beginPath();ctx.translate(x, y);ctx.rotate(Math.PI);for (let i = 0; i < accuracy; i++) {const step = i / accuracy * (Math.PI * 2);//设置心上面两点之间的角度，具体分成多少份，好像需要去试。const xx = r * (16 * Math.pow(Math.sin(step), 3));const yy = r * (13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step));ctx.lineTo(xx, yy);ctx.fillStyle = randomColor();ctx.fill();}ctx.closePath();ctx.restore();// 释放状态
}drawHeart(200, 300, 5);
drawHeart(300, 200, 5);function randomColor() {return "#" + Math.round(Math.random() * 0xffffff).toString(16);
}

对角线

const { offsetWidth, offsetHeight } = document.body;

for (let index = 0; index < offsetWidth; index += 50) {ctx.beginPath();ctx.moveTo(index, offsetHeight);ctx.lineTo(offsetWidth - index, 0);ctx.strokeStyle = "#ddd";ctx.stroke();ctx.closePath();}

科技风圆弧

const { offsetWidth, offsetHeight } = document.body;canvas.width = offsetWidth;
canvas.height = offsetHeight;

technologyLine(offsetHeight, 40);function technologyLine(h, space) {for (let i = 0; i < h; i += space) {ctx.beginPath();ctx.strokeStyle = "#ccc";ctx.moveTo(0, i);ctx.lineTo(i, h);ctx.moveTo(offsetWidth, i);ctx.lineTo(offsetWidth - i, h);ctx.stroke();ctx.closePath();}
}

 for (let index = 0; index < offsetWidth; index += 40) {ctx.beginPath();ctx.moveTo(index, 0);ctx.lineTo(offsetWidth, index);ctx.strokeStyle = "#ccc";ctx.stroke();ctx.closePath();}

 for (let index = 0; index < offsetWidth; index += 40) {ctx.beginPath();ctx.moveTo(index, 0);ctx.lineTo(offsetWidth, index);ctx.strokeStyle = "#ccc";ctx.moveTo(index, 0);ctx.lineTo(0, offsetWidth - index);ctx.stroke();ctx.closePath();
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！