画布是HTML5中的元素，该标签通过使用JavaScript在网页上动态绘制图形，画布是一个矩形区域，可以控制其中的每一个像素，canvas拥有多种绘制路径、矩形、圆形、字符和添加图像的方法（IE8或更早的浏览器不支持）
canvas创建线条，通过使用moveTo()方法把路径移动到画布上的指定像素点（不创建线条），通过linkTo方法添加一个新的像素点，然后在画布上创建从该点到最后指定点得线条，最后利用stroke()方法绘制通过moveTo()和lineTo()方法定义的路径。在vue2中的应用：
<template>
<div class="container">
<canvas id="canvas-show" width="1000px" height="800px"></canvas>
</div>
</template>
<script>
export default {
name: 'canvasShow',
data() {
return {
}
},
methods: {
oneLine(){
var canvas=document.getElementById("canvas-show");
var ctx=canvas.getContext("2d");
// ctx.stroke();
ctx.moveTo(0,40);
ctx.lineTo(0,0);
ctx.lineTo(20,35);
ctx.lineTo(40,0);
ctx.lineTo(40,40);
ctx.stroke();
}
},
mounted() {
this.oneLine()
}
}
</script>
<style scoped></style>
canvas图形的填充，通过fillStyle设置填充的颜色，如果没有设置该属性值则fill()方法的填充色为默认的黑色（如果路径未闭合的话，fill()方法则会在路径的结束点到开始点之间连上一条线，去闭合该路径，然后填充）
toFill(){
var canvas=document.getElementById("canvas-show");
var ctx=canvas.getContext("2d");
ctx.moveTo(100,0);
ctx.lineTo(0,100);
ctx.lineTo(200,100);
ctx.lineTo(100,0);
ctx.fillStyle = "#409eff";
ctx.fill();
}
toFill(){ // 未闭合的三角形
var canvas=document.getElementById("canvas-show");
var ctx=canvas.getContext("2d");
ctx.moveTo(100,0);
ctx.lineTo(0,100);
ctx.lineTo(200,100);
ctx.lineTo(130,0); //终点位置与起点不同，终点坐标与起点间自动连接一条线
ctx.fillStyle = "#409eff";
ctx.fill();
}
canvas绘制圆形，通过beginPath()方法开始一条路径或重置当前的路径，用arc()方法创建弧/曲线，arc()方法的前两个参数为中心坐标，第三个参数为半径，第四个参数为起始角，第五个参数为结束角。
circle(){
var canvas=document.getElementById("canvas-show");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(200,100,60,0,2*Math.PI);
ctx.stroke();
}
以此类推，通过绘制圆形与填充可以实现笑脸的效果
smileFace(){
var canvas=document.getElementById("canvas-show");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true);
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true);
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true);
ctx.fill();
}
使用canvas绘制字体
text(){
var canvas=document.getElementById("canvas-show");
var ctx=canvas.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("美的集团",50,100);
ctx.strokeText("佛山顺德",50,180);
}
canvas的实际应用：实现时钟效果。
clock() {
var canvas = document.getElementById('canvas-show')
var ctx = canvas.getContext('2d')
function move() {
ctx.save()
ctx.translate(300, 300)
// 初始化一些公共的样式
ctx.lineCap = 'round'
ctx.strokeStyle = '#000'
ctx.lineWidth = 8
ctx.scale(0.5, 0.5)
// 画外面的圆
ctx.save()
ctx.beginPath()
ctx.strokeStyle = '#409eff'
ctx.arc(0, 0, 150, 0, 2 * Math.PI)
ctx.stroke()
ctx.restore()
// 画里面的刻度
ctx.save()
ctx.beginPath()
for (var i = 0; i < 12; i++) {
ctx.moveTo(0, -125)
ctx.lineTo(0, -140)
ctx.stroke()
ctx.rotate((30 * Math.PI) / 180)
}
ctx.restore()
// 分针刻度
ctx.save()
ctx.lineWidth = 3
for (var i = 0; i < 60; i++) {
if (i % 5 != 0) {
ctx.beginPath()
ctx.moveTo(0, -135)
ctx.lineTo(0, -140)
ctx.stroke()
}
ctx.rotate((6 * Math.PI) / 180)
}
ctx.restore()
// 当前时间
var date = new Date()
var s = date.getSeconds()
var min = date.getMinutes() + s / 60
var h = date.getHours() + min / 60
// 时针
ctx.save()
ctx.rotate((30 * h * Math.PI) / 180)
ctx.lineWidth = 14
ctx.beginPath()
ctx.moveTo(0, -80)
ctx.lineTo(0, 20)
ctx.stroke()
ctx.restore()
// 分针
ctx.save()
ctx.lineWidth = 10
ctx.rotate((6 * min * Math.PI) / 180)
ctx.beginPath()
ctx.rotate((-30 * Math.PI) / 180)
ctx.moveTo(0, -120)
ctx.lineTo(0, 30)
ctx.stroke()
ctx.restore()
//秒针
ctx.save()
ctx.lineWidth = 6
ctx.strokeStyle = '#409eff'
ctx.fillStyle = '#409eff'
ctx.rotate((6 * s * Math.PI) / 180)
ctx.beginPath()
ctx.arc(0, 0, 10, 0, 2 * Math.PI)
ctx.fill()
ctx.beginPath()
ctx.moveTo(0, -125)
ctx.lineTo(0, 30)
ctx.stroke()
ctx.beginPath()
ctx.arc(0, -135, 10, 0, 2 * Math.PI)
ctx.stroke()
ctx.restore()
ctx.restore()
}
setInterval(function () {
ctx.clearRect(0, 0, canvas.width, canvas.height)
move()
}, 1000)
},
canvas的实际应用：实现刮刮乐效果
<template>
<div class="container">
<canvas id="canvas-show" width="1000px" height="800px"></canvas>
<div class="hidden-back">{{prize}}</div>
</div>
</template>
<script>
export default {
name: 'canvas-show',
data() {
return {
prize:''
}
},
methods: {
card() {
var arr = ['特等奖','一等奖','二等奖','三等奖','四等奖','五等奖','六等奖']
var prizePosition=Math.floor((Math.random()*arr.length))
this.prize=arr[prizePosition]
var canvas = document.getElementById('canvas-show')
var ctx = canvas.getContext('2d')
ctx.fillStyle = '#cacaca'
ctx.fillRect(0, 0, 400, 400)
ctx.globalCompositeOperation = 'destination-out'
// 鼠标按下
canvas.onmousedown = function (event) {
ctx.beginPath()
ctx.arc(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop, 20, 0, 2 * Math.PI)
ctx.fill()
// 鼠标移动
document.onmousemove = function (event) {
ctx.beginPath()
ctx.arc(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop, 20, 0, 2 * Math.PI)
ctx.fill()
}
// 鼠标抬起
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null
}
return false
}
}
},
mounted() {
this.card()
}
}
</script>
<style scoped>
.hidden-back{
margin-left: 120px;
margin-top: 130px;
font-size: 50px;
float: left;
}
#canvas-show{
position: absolute;
left: 100;
top: 100;
}
</style>
标签的属性与方法汇总：
| 属性 | 描述 |
|---|---|
| fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式 |
| strokeStyle | 设置或返回用于笔触的颜色、渐变或模式 |
| shadowColor | 设置或返回用于阴影的颜色 |
| shadowBlur | 设置或返回用于阴影的模糊级别 |
| shadowOffsetX | 设置或返回阴影距形状的水平距离 |
| shadowOffsetY | 设置或返回阴影距形状的垂直距离 |
| lineCap | 设置或返回线条的结束端点样式 |
| lineJoin | 设置或返回两条线相交时，所创建的拐角类型 |
| lineWidth | 设置或返回当前的线条宽度 |
| miterLimit | 设置或返回最大斜接长度 |
| font | 设置或返回文本内容的当前字体属性 |
| textAlign | 设置或返回文本内容的当前对齐方式 |
| textBaseline | 设置或返回在绘制文本时使用的当前文本基线 |
| width | 返回 ImageData 对象的宽度 |
| height | 返回 ImageData 对象的高度 |
| data | 返回一个对象，其包含指定的 ImageData 对象的图像数据 |
| globalAlpha | 设置或返回绘图的当前 alpha 或透明值 |
| globalCompositeOperation | 设置或返回新图像如何绘制到已有的图像上 |
| 方法 | 描述 |
|---|---|
| createLinearGradient() | 创建线性渐变（用在画布内容上） |
| createPattern() | 在指定的方向上重复指定的元素 |
| createRadialGradient() | 创建放射状/环形的渐变（用在画布内容上） |
| addColorStop() | 规定渐变对象中的颜色和停止位置 |
| rect() | 创建矩形 |
| fillRect() | 绘制“被填充”的矩形 |
| strokeRect() | 绘制矩形（无填充） |
| clearRect() | 在给定的矩形内清除指定的像素 |
| fill() | 填充当前绘图（路径） |
| stroke() | 绘制已定义的路径 |
| beginPath() | 起始一条路径，或重置当前路径 |
| moveTo() | 把路径移动到画布中的指定点，不创建线条 |
| closePath() | 创建从当前点回到起始点的路径 |
| lineTo() | 添加一个新点，然后在画布中创建从该点到最后指定点的线条 |
| clip() | 从原始画布剪切任意形状和尺寸的区域 |
| quadraticCurveTo() | 创建二次贝塞尔曲线 |
| bezierCurveTo() | 创建三次方贝塞尔曲线 |
| arc() | 创建弧/曲线（用于创建圆形或部分圆） |
| arcTo() | 创建两切线之间的弧/曲线 |
| isPointInPath() | 如果指定的点位于当前路径中，则返回 true，否则返回 false |
| scale() | 缩放当前绘图至更大或更小 |
| rotate() | 旋转当前绘图 |
| translate() | 重新映射画布上的 (0,0) 位置 |
| transform() | 替换绘图的当前转换矩阵 |
| setTransform() | 将当前转换重置为单位矩阵。然后运行 transform() |
| fillText() | 在画布上绘制“被填充的”文本 |
| strokeText() | 在画布上绘制文本（无填充） |
| measureText() | 返回包含指定文本宽度的对象 |
| drawImage() | 向画布上绘制图像、画布或视频 |
| createImageData() | 创建新的、空白的 ImageData 对象 |
| getImageData() | 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 |
| putImageData() | 把图像数据（从指定的 ImageData 对象）放回画布上 |
| save() | 保存当前环境的状态 |
| restore() | 返回之前保存过的路径状态和属性 |
| createEvent() | 用于创建事件 |
| getContext() | 返回一个canvas渲染的上下文 |
| toDataURL() | 用于将canvas对象转换为base64位编码 |
