canvas笔记

canvas代码

基本使用




    
    Title
    







也可使用js设置canvas的宽高,以及所代表的的意思




注意
*不要使用 CSS 设置。因为默认创建一个 300 150 的画布,
如果使用 CSS 来设置宽高的话,画布就会按照 300 150 的比例进行缩放,也就是将 300 150 的页面显示在 400 400 的容器中*

绘制路径

canvas笔记_第1张图片

使用 Canvas 绘制图像的步骤
image.png

绘制弧/曲线

arc() 方法创建弧/曲线(用于创建圆或部分圆)。

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

  • x:圆心的 x 坐标
  • y:圆心的 y 坐标
  • r:圆的半径
  • sAngle:起始角,以弧度计(弧的圆形的三点钟位置是 0 度)
  • eAngle:结束角,以弧度计
  • counterclockwise:可选。规定应该逆时针还是顺时针绘图。false 为顺时针,true 为逆时针

canvas笔记_第2张图片

画一个顺时针的四分之一圆

let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
        context.beginPath() 
        context.arc(100,100,50,0,Math.PI*0.5,false)
        context.strokeStyle = "white"
        context.stroke()

因为我们设置的起始角是 0,对照 w3cschool 上的截图可知弧度的 0 的位置是 3 点钟方向,然后结束角我们设置为 0.5 PI,也就是 6 点钟方向

stroke()和fill()的区别

  • stroke() :描边
  • fill() :填充

我们可以通过 strokeStyle属性 和 fillStyle属性来设置描边和填充的颜色

绘制直线

let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
        context.beginPath() 
        context.moveTo(50,50)
        context.lineTo(100,100)
        context.strokeStyle = "white"
        context.stroke()
  • moveTo(x,y):把路径移动到画布中的指定点,不创建线条
  • lineTo(x,y):添加一个新点,然后在画布中创建从该点到最后指定点的线条

这里需要注意以下几点:

  • 如果没有 moveTo,那么第一次 lineTo 的就视为 moveTo
  • 每次 lineTo 后如果没有 moveTo,那么下次 lineTo 的开始点为前一次 lineTo 的结束点。

也就是这种情况:

 let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
        context.beginPath() 
        context.lineTo(100,100)
        context.lineTo(50,100)
        context.lineTo(200,200)
        context.lineTo(20,10)
        context.strokeStyle = "white"
        context.stroke()

我们没有设置 moveTo,而是设置了三个 lineTo,这也是可以的,将三个 lineTo 设置的点依次连接就好~

给绘制的直线添加样式

canvas笔记_第3张图片
其宽度设置为 10,并且加上“圆角”的效果

let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
        context.beginPath() 
        context.moveTo(50,100)
        context.lineTo(200,200)
        context.lineWidth = 10
        context.lineCap = 'round'
        context.strokeStyle = "white"
        context.stroke()

canvas笔记_第4张图片

绘制矩形

 let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
        context.beginPath() 
        context.fillStyle = '#fff'
        context.fillRect(10,10,100,100)
        context.strokeStyle = '#fff'
        context.strokeRect(130,10,100,100)

canvas笔记_第5张图片

  • fillRect(x,y,width,height):绘制一个实心矩形
  • strokeRect(x,y,width,height):绘制一个空心矩形

颜色、样式和阴影

canvas笔记_第6张图片

  let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
        context.beginPath() 
        context.arc(100,100,50,0,2*Math.PI,false);
        context.fillStyle = '#fff';
        context.shadowBlur = 20
        context.shadowColor = "#fff"
        context.fill()

canvas笔记_第7张图片

设置渐变

canvas笔记_第8张图片
绘制渐变主要用到了 createLinearGradient() 方法,我们来看一下这个方法:context.createLinearGradient(x0,y0,x1,y1);

  • x0:开始渐变的 x 坐标
  • y0:开始渐变的 y 坐标
  • x1:结束渐变的 x 坐标
  • y1:结束渐变的 y 坐标
let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
        var grd = context.createLinearGradient(100,100,100,200)
        grd.addColorStop(0,'pink');
        grd.addColorStop(1,'lightBlue')
        context.fillStyle = grd;
        context.fillRect(100,100,200,200)

canvas笔记_第9张图片
createLinearGradient() 的参数是两个点的坐标,这两个点的连线实际上就是渐变的方向。我们可以使用 addColorStop() 方法来设置渐变的颜色。

gradient.addColorStop(stop,color);:

  • stop:介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置
  • color:在结束位置显示的 CSS 颜色值
 let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
        var grd = context.createLinearGradient(0,0,0,400)
        grd.addColorStop(0,'pink');
        grd.addColorStop(0.2,'lightBlue')
        grd.addColorStop(0.4,'red')
        grd.addColorStop(0.6,'pink')
        grd.addColorStop(0.8,'black')
        grd.addColorStop(1,'yellow')
        context.fillStyle = grd;
        context.fillRect(0,0,400,400)

canvas笔记_第10张图片

图形转换

canvas笔记_第11张图片

let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
       context.strokeStyle = 'white'
       context.strokeRect(5,5,50,25)
       context.scale(2,2)
       context.strokeRect(5,5,50,25)
       context.scale(2,2)
       context.strokeRect(5,5,50,25)

canvas笔记_第12张图片

旋转

let canvas = this.$refs.canvas
        let context = canvas.getContext('2d')
        let cx = canvas.width = 400
        let cy = canvas.height = 400
       context.fillStyle = 'white'
       context.rotate(20*Math.PI/180)
       context.fillRect(70,30,200,100)

canvas笔记_第13张图片

context.rotate(angle);

  • angle : 旋转角度,以弧度计。如需将角度转换为弧度,请使用 degrees*Math.PI/180 公式进行计算。举例:如需旋转 5 度,可规定下面的公式:5*Math.PI/180
  • 、我们将画布旋转了 20°,然后再画了一个矩形。

在进行图形变换的时候,我们需要画布旋转,然后再绘制图形,
使用的图形变换的方法都是作用在画布上的,既然对画布进行了变换,那么在接下来绘制的图形都会变换。
比如我对画布使用了 rotate(20*Math.PI/180) 方法,就是将画布旋转了 20°,然后之后绘制的图形都会旋转 20°。

图像绘制

Canvas 还有一个经常用的方法是drawImage()
image.png
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

  • img:规定要使用的图像、画布或视频
  • sx:可选。开始剪切的 x 坐标位置
  • sy:可选。开始剪切的 y 坐标位置
  • swidth:可选。被剪切图像的宽度
  • sheight:可选。被剪切图像的高度
  • x:在画布上放置图像的 x 坐标位置
  • y:在画布上放置图像的 y 坐标位置
  • width:可选。要使用的图像的宽度(伸展或缩小图像)
  • height:可选。要使用的图像的高度(伸展或缩小图像)

你可能感兴趣的