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：可选。要应用的图像的高度（舒展或放大图像）