canvas代码
根本应用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #canvas { background: #000; } </style></head><body><canvas id="canvas" width="400" height="400"></canvas><script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.beginPath(); context.arc(100, 100, 50, 0, Math.PI * 2, true); context.closePath(); context.fillStyle = 'rgb(255,255,255)'; context.fill();</script></body></html>也可应用js设置canvas的宽高,以及所代表的的意思
<template> <canvas id="canvas" ref="canvas"></canvas></template><script> export default { methods: { init() { let canvas = this.$refs.canvas let context = canvas.getContext('2d')//获取到 Canvas 的上下文环境 代表一个二维渲染上下文 let cx = canvas.width = 400 let cy = canvas.height = 400 context.beginPath() // 起始一条门路，或重置以后门路 context.arc(100,100,50,0,Math.PI*2,true)// 创立弧/曲线 context.closePath()// 创立从以后点回到起始点的门路 context.fillStyle = 'rgb(255,255,255)' // 设置或返回用于填充绘画的色彩、突变或模式 context.fill()// 填充以后绘图（门路） } }, mounted () { this.init() }, }</script><style lang="scss" scoped>#canvas{ background-color: #000;}</style>留神
*不要应用 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：可选。要应用的图像的高度（舒展或放大图像）