HBC BLOG

主题

canvas知识点整理 ​

圆 ​

javascript
对象.arc(x, y, r, 起点, 结束, false | true);
javascript
ctx.fillStyle = "#000";
ctx.fill(); //填充颜色
javascript
ctx.strokeStyle = "#000";
ctx.stroke(); //绘制线条
javascript
整圆: 2 * Math.PI || (360 * Math.PI) / 180;
javascript
线条粗细: ctx.lineWidth = 5;

线 ​

javascript
起点 ： moveTo
结束 ： lineTo
绘制 :  fill || stroke

界限：重置 ​

javascript
beginPath();

画图旋转 ​

javascript
rotate(度数);

动画 ​

javascript
requestAnimationFrame;

图片 ​

javascript
var images = new Image(); // 解决图片的跨域问题
images.crossOrigin = "Anonymous"; //指定图片的URL
images.src = "路径";
images.onload = () => {
  ctx.drawImage(images, x, y, width, height);
};

加入图片和获取 ​

javascript
getImageData  putImageData (操作数组 要比drawImage直接放入图片性能好)

加入文字 ​

javascript
context.font = "18px 微软雅黑";
context.fillText(文字内容, x, y);

清空画布 ​

javascript
context.clearRect(0, 0, canvas_width, canvas_height);