什么是Canvas？
Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等
创建Canvas
通常在<canvas>标签内添加一些说明，若浏览器不支持Canvas则显示标签内部的说明
<canvas id="myCanvas" >
你的浏览器不支持canvas!
</canvas>
复制代码
复制代码
var cav = document.getElementById('myCanvas')
if(cav.getContext){
var ctx = canvas.getContext('2d')
}
复制代码
复制代码
api使用
1.线
ctx.beginPath()//开始绘制
ctx.moveTo(20,20) // 设置起点
ctx.lineTo(200,20) // 设置目标点
ctx.lineWith=1.0 //设置线宽
ctx.strokeStyle='#CC0000' //设置线的颜色
ctx.stroke() //线着色 线变得可见
复制代码
复制代码
2.矩形
ctx.fillRect(50,50,200,100) //画矩形 参数设置 fillRect(x,y,width,height)
ctx.strokeRect(10,10,200,100); //空心矩形
ctx.clearRect(100,50,50,50);//清除矩形区域内容
复制代码
复制代码
3.绘制文本
ctx.font //设置字体
ctx.textAlign = "center" //对齐方式
ctx.fillStyle = "#008600" //填充颜色
ctx.fillText = ("text",20,20) //设置内容及坐标位置
ctx.strokeText =("text",20,50) //空心字
复制代码
复制代码
4.绘制圆形和扇形
使用 arc 绘制扇形 ctx.arc(x,y,radius,startAngle,endAngle,counterclockwise)
x,y 圆心坐标 radius 半径 startAngle,endAngle 起末角度(Math.PI表示角度180°) counterclockwise 表示作图是顺时针(false)还是逆时针(true)
5. 渐变色
createLinearGradient(x1,y1,x2,y2) // x1,y1是起点坐标x2 y2是终点坐标 通过坐标可以实现 从上至下 从左到右的渐变
var Gradient = ctx.createLinearGradient(0,0,0,160);
myGrandient.addColorStop(0,"#000000")
myGradient.addColorStop(1, "#636363");
复制代码
复制代码
6.设置阴影
ctx.shadowOffsetX= 10; //水平位移
ctx.shadowOffsetY = 10 //设置垂直位移
ctx.shadowBlur=5 //设置模糊度
ctx.shadowColor = "rgba(0,0,0,0.5)"//设置阴影颜色
ctx.fillstyle = "#cc0000"
ctx.fillRect(10,10,200,100)
复制代码
实现小demo
在这里使用vue实现demo，想要获取源代码的可以关注我的公众号:前端小嘟(加作者微信备注，拉你进前端技术交流群)
1.画笔
画笔是canvas中很重要的东西，实现很多复杂canvas的项目都会使用到
<template>
<div>
<canvas
width="320"
height="600"
ref="can"
@mousedown="handleMousedown"
@mousemove="handleMousemove"
@mouseup="handleMouseup"
></canvas>
</div>
</template>
<script>
export default {
name: "Canvas",
data() {
return {
status: false,
ctx: "",
img: "",
};
},
methods: {
init() {
var context = this.$refs.can;
var ctx = context.getContext("2d");
this.ctx = ctx;
},
handleMousedown() {
this.status = true;
this.ctx.beginPath();//开始绘制
},
handleMousemove(e) {
if (!this.status) {
return;
}
var x = e.offsetX;
var y = e.offsetY;
this.ctx.lineTo(x, y);
this.ctx.strokeStyle = "red"; //设置线的颜色
this.ctx.stroke(); //线着色 线变得可见
},
handleMouseup() {
this.status = false;
},
},
mounted() {
this.init();
},
};
</script>
复制代码
2.撕撕看
1.需要设置图片和画布，将画布覆盖图片 2.随机生成图片 3.获取鼠标事件，实现擦除效果
<template>
<div>
<img src="../assets/girls3.jpg" alt="" ref="img" />
<canvas
width="320"
height="600"
ref="can"
@mousedown="handleMousedown"
@mousemove="handleMousemove"
@mouseup="handleMouseup"
></canvas>
</div>
</template>
export default {
name: "Canvas",
data() {
return {
status: false,
ctx: "",
img: "",
};
},
methods: {
init() {
var context = this.$refs.can;
var ctx = context.getContext("2d");
this.ctx = ctx;
var img = this.$refs.img;
if (context.getContext) {
ctx.fillStyle = "#ccc";
console.log(ctx.width);
ctx.fillRect(0, 0, 320, 600);
}
},
setUrl() {
var img_arr = [
require("../assets/girls1.jpg"),
require("../assets/girls2.jpg"),
require("../assets/girls3.jpg"),
];
var random = Math.round(Math.random() * 3); //设置随机数
this.img = img_arr[random];
},
handleMousedown() {
this.status = true;
},
handleMousemove(e) {
if (!this.status) {
return;
}
var x = e.offsetX;
var y = e.offsetY;
this.ctx.clearRect(x, y, 15, 15);
},
handleMouseup() {
this.status = false;
},
},
mounted() {
this.init();
},
};
复制代码
css代码
<style scoped>
img {
width: 320px;
height: 600px;
position: absolute;
top: 10%;
left: 30%;
}
canvas {
width: 320px;
height: 600px;
position: absolute;
top: 10%;
left: 30%;
border: 1px solid #000;
box-sizing: border-box;
}
</style>
复制代码
在线演示
3.使用Canvas绘制饼图
1.饼图的绘制其实就是多个扇形图按照所占的比例拼接到一起
<template>
<div>
<canvas width="800" height="500" ref="can"></canvas>
</div>
</template>
<script>
export default {
name: "Canvas",
data() {
return {
status: false,
ctx: "",
total: 0, //总量
data: [
{
name: "java",
color: "red",
num: 0.1,
},
{
name: "python",
color: "yellow",
num: 0.2,
},
{
name: "js",
color: "blue",
num: 0.4,
},
{
name: "vue",
color: "pink",
num: 0.3,
},
],
};
},
methods: {
init() {
var context = this.$refs.can;
var ctx = context.getContext("2d");
var startRadian = 0; //开始角度
var endRadian; //结束角度
this.ctx = ctx;
const x0 = this.ctx.canvas.width / 2;
const y0 = this.ctx.canvas.height / 2;
for (var i in this.data) {
this.total += this.data[i].num;
}
for (var i in this.data) {
var item = this.data[i];
endRadian = (item.num / this.total) * 2 * Math.PI + startRadian;
ctx.beginPath(); //开始绘制
ctx.fillStyle = item.color; //画笔颜色
ctx.moveTo(250, 250); //设置原点 从某点开始
ctx.arc(250, 250, 200, startRadian, endRadian, false);
startRadian = endRadian;
ctx.fill(); //填充
}
},
mounted() {
this.init();
},
};
</script>
出现的问题
1.使用canvas绘图模糊
使用canvas绘图 分辨率较低是有可能会出现图片模糊
解决方法 拿上面的饼图做个例子
<template>
<div> //父元素定义zoom:0.5 或者使用transform:scale(0.5,0.5) 缩小两倍
<canvas width="1600" height="1000" ref="can"></canvas>
</div>
</template>
<script>
export default {
name: "Canvas",
data() {
return {
status: false,
ctx: "",
total: 0, //总量
data: [
{
name: "java",
color: "red",
num: 0.1,
},
{
name: "python",
color: "yellow",
num: 0.2,
},
{
name: "js",
color: "blue",
num: 0.4,
},
{
name: "vue",
color: "pink",
num: 0.3,
},
],
};
},
methods: {
init() {
var context = this.$refs.can;
var ctx = context.getContext("2d");
var startRadian = 0; //开始角度
var endRadian; //结束角度
this.ctx = ctx;
const x0 = this.ctx.canvas.width / 2;
const y0 = this.ctx.canvas.height / 2;
for (var i in this.data) {
this.total += this.data[i].num;
}
for (var i in this.data) {
var item = this.data[i];
endRadian = (item.num / this.total) * 2 * Math.PI + startRadian;
ctx.beginPath(); //开始绘制
ctx.scale(2,2) //放大两倍，就实现canvas图清晰了(canvas的宽高为之前的两倍)
ctx.fillStyle = item.color; //画笔颜色
ctx.moveTo(250, 250); //设置原点 从某点开始
ctx.arc(250, 250, 400, startRadian, endRadian, false);
startRadian = endRadian;
ctx.fill(); //填充
}
},
mounted() {
this.init();
},
};
</script>
后序
canvas入门级教程就先到这里，如果觉得该文章对大家有帮助的话，可以持续关注一下，后续会写一些酷炫的canvas特效及饼状图的优化等等
如果需要更多前端学习资料可以关注前端小嘟获取更多学习资料，私聊作者拉你进前后端学习交流群
