canvas笔记

基本使用




    
    Title

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

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

绘制路径

使用 Canvas 绘制图像的步骤

绘制弧/曲线

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

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

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

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

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 设置的点依次连接就好~

给绘制的直线添加样式

其宽度设置为 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()

绘制矩形

 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)

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

颜色、样式和阴影

  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()

设置渐变

绘制渐变主要用到了 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)

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)

图形转换

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)

旋转

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)

context.rotate(angle);

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

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

图像绘制

Canvas 还有一个经常用的方法是drawImage()。

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

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