Canvas基础知识点

GW
636 阅读3分钟

设置canvas 的尺寸

canvas默认尺寸是300 X 150px 设置canvas dom 元素的 width height 属性。 注意：不要使用css 设置canvas 尺寸。 也可以使用jS设置， 尺寸尽量控制在4000以内

绘制简单图像

 // 获取画布
 const canvas = document.querySelector('#canvas')
 // 设置画布尺寸
 canvas.width = 500
 canvas.height = 500
 // 获取画笔，也即是上下文对象
 const ctx = canvas.getContext('2d')
 //画笔颜色 红色
 ctx.fillStyle = 'red';
 //图形形状 矩形
 ctx.fillRect(50, 100, 400, 200);

绘制路径

步骤

  1. 开始建立路径：beginPath()
  2. 向路径集合中添加子路径：
    • moveTo(x,y); 形状; closePath() 可选,
    • moveTo(x,y); 形状; closePath() 可选,
    • moveTo(x,y); 形状; closePath() 可选,
  3. 显示路径：填充fill() ，描边stroke()

可绘制的形状

  • 直线：lineTo(x,y); lineTo(x,y); lineTo(x,y);
  • 圆弧：arc(x,y,半径，开始弧度，结束弧度，方向)
  • 切线圆弧：arcTo(x1,y1,x2,y2,半径)
  • 二次贝塞尔曲线：quadraticCurveTo(cpx1,cpy1,x,y)
  • 三次贝塞尔曲线：bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)
  • 矩形：rect(x,y,w,h)

图形样式

着色区域

  • 描边区域： strokeStyle 代表了描边样式，描边区域的绘制方法是 stroke()、strokeRect() 或者strokeText() 。
  • 填充区域： fillStyle 代表了填充样式，填充区域的绘制方法是 fill()、fillRect() 或者fillText()

渐变

线性渐变

// 渐变区域
const linerGradient=ctx.createLinearGradient(x1,y1,x2,y2);
// 添加渐变颜色节点
linerGradient.addColorStop(0,'red');
linerGradient.addColorStop(.5,'yellow');
linerGradient.addColorStop(1,'green');
//为样式赋值
ctx.fillStyle= linerGradient
//绘图
ctx.fillRect(x,y,w,h)

image.png

径向渐变

const radGradient=ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
//其余同上

image.png

纹理

const pattern=ctx.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

image 可以是图片 视频 canvas

const image= new Image()
image.src = '路径'
image.onload = function(){
  const pattern = ctx.createPattern(image, "repeat|repeat-x|repeat-y|no-repeat"); 
  ctx.fillStyle = pattern 
ctx.fillRect(x,y,w,h)
}

影响描边样式的因素

  • strokeStyle：描边的颜色
  • lineWidth：描边宽
  • lineCap：描边端点样式
  • lineJoin：描边拐角类型
  • miterLimit：拐角最大厚度（只适用于lineJoin=‘miter’ 的情况）
  • setLineDash(segments)：将描边设置为虚线，可以通过getLineDash() 方法获取虚线样式
  • lineDashOffset：虚线的偏移量

文本

文本的属性

  1. 字体：font
  2. 水平对齐： textAlign （start left right end center）
  3. 垂直对齐：textBaseline

文本的绘制方法

  1. 填充文字 fillText(text, x, y , maxWidth)
  2. 描边文字 strokeText(text, x, y , maxWidth) 获取文字宽度的方法：measureText(text)

图像

  1. 绘图 + 位移：drawImage(image, x, y)
  2. 绘图 + 位移 + 缩放：drawImage(image, x, y,width,height)
  3. 绘图 + 裁切 + 位移 + 缩放：drawImage(image, x1, y1,w1,h1,x2,y2,w2,h2)
    • x1, y1,w1,h1 ： 相机视口
    • x2,y2,w2,h2 ： 视图 image 可以是图片 视频 canvas

变换

变换的本质是对canvas 坐标系的操作 变换有3个特性：

  • 移动： translate(x,y)
  • 旋转： rotate(angle)
  • 缩放： scale(x,y)

动画

制作动画的步骤

  1. 清理画布：ctx.clearRect(0,0,canvas.width,canvas.height)
  2. 保存 canvas 上下文对象的状态：ctx.save()
  3. 绘制动画图形：…
  4. 恢复 canvas 上下文对象的状态：ctx.restore()

驱动动画的方法

  1. setTimeOut(fn,time) 和setInterval(fn,time)
  • 优点：使用方便，动画的时间间隔可以自定义。
  • 缺点：隐藏浏览器标签后，会依旧运行，造成资源浪费。与浏览器刷新频率不同步。
  1. requestAnimationFrame(fn)（常用 ）
  • 优点：性能更优良。隐藏浏览器标签后，便不会运行。与浏览器刷新频率同步。
  • 缺点：动画的时间间隔无法自定义
avatar
文章
阅读
粉丝