JavaScript Canvas绘图教程：Vue中实现图形绘制与图片处理

引言

Canvas是HTML中用于绘图的元素，与SVG通过标签定义图形不同，Canvas依赖JavaScript代码进行图形渲染，常见于移动端分享海报生成及照片裁剪等应用场景。本文将结合部分Canvas API，介绍在Vue项目中如何执行基础的图形绘制与图片处理操作。

第一部分：图形绘制

绘图第一步：准备画布与画笔对象

<templete>
  <div>
    <canvas id="my-canvas" width="400" height="400">
    //注意：给canvas设置宽高是不用带单位的，以像素为单位
  </div>
</templete>
<script>
export default {
  mounted() {//注意要在DOM元素渲染完后才能操作DOM
    this.draw();
  },
  methods: {
    draw() {
      let canvas = document.getElementById('my-canvas');//获取画布
      let ctx = canvas.getContext('2d');//获取画笔
      //之后的操作都是基于ctx
}
</script>

绘图第二步：调整画笔线条粗细

ctx.fill();//用粗的毛笔填充
ctx.stroke()；//用细的铅笔描边

绘图第三步：设置画笔颜色

ctx.fillStyle = 'red'
ctx.strokrStyle = 'blue'

绘图第四步：执行描点与连线操作

为便于理解，下文将颜色设置步骤前置，但实际绘制流程需先确定路径点，最后再指定呈现的颜色与填充方式。

路径绘制主要依赖(x, y)坐标系，Canvas坐标原点位于左上角，向右为x轴正方向，向下为y轴正方向。

（1）绘制三角形

首先定义三个顶点坐标，随后将各点依次连接即可完成绘制。

ctx.beginPath();//新建一条绘制路径
ctx.moveTo(10, 10);//起点
ctx.lineTo(60, 10);//向x轴延申10个像素
ctx.lineTo(60, 60);//向y轴延申10个像素
ctx.closePath();//关闭当前路径
ctx.strokeStyle = 'red';//设置画笔颜色
ctx.stroke();//以描边的方式把描点的位置链接起来
//填充方式画三角形
//ctx.fillStyle = 'blue';//设置颜色
//ctx.fill();//以填充的方式把描点的位置链接起来

最终效果如图所示

（2）绘制矩形

无需手动计算四个顶点，Canvas API提供了直接绘制矩形的方法，可一步完成填充或描边操作。

fillRect(x,y,width,height);//填充一个矩形
strokeRect(x,y,width,height);//描边一个矩形
//参数x,y是起点
//例子
ctx.fillRect(10,10,50,50);//填充一个矩形
ctx.strokeRect(70,10,50,50);//描边一个矩形
//默认颜色为黑色，可通过fillStyle/strokeStyle改颜色

（3）绘制圆形

arc(x, y, r, startAngle, endAngle, direction)
//x,y为圆心，r为半径，startAngle、endAngle分别代表开始角度和结束角度，direction代表方向，true为顺时针，false为逆时针，不填默认为true
//例子
ctx.arc(100,100,20,0,2*Math.PI);
ctx.stroke();//以描边方式将点连接起来

（4）进阶：绘制笑脸图形

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI, true);
ctx.moveTo(135, 100);//重新设置画笔起点
ctx.arc(100, 100, 35, 0, Math.PI, false);
ctx.moveTo(90, 85);
ctx.arc(85, 85, 5, 0, 2 * Math.PI, true);
ctx.moveTo(120, 85);
ctx.arc(115, 85, 5, 0, 2 * Math.PI, true);
ctx.stroke();

绘图第五步：添加文本署名

如何在Canvas画布上渲染文字内容？

fillText('文本',x,y,maxWidth);//x,y为文本绘制开始位置，maxWidth为最大宽度（可选参数）
strokeText('文本',x,y,maxWidth);
font ='';//设置字体大小和字体样式 
//例子
ctx.font = '32px serif'
ctx.fillText('任嘉伦最帅',10,50)
ctx.strokeText('任国超也帅',10,100)

第二部分：图片绘制

场景一：页面中已存在图片元素，需在Canvas上还原绘制该图片

ctx.drawImage(image, x, y,width,height)//image可以是img元素或Image构造函数创建的屏幕外图片对象，x,y为绘制的起始位置

//场景一
<template>
  <div class="wrap-box">
    <div class="canvas-content">
      <canvas id="my-canvas" width="300" height="300"></canvas>
    </div>
    <div class="img-content">
      <img src="../../assets/rjl.jpg" alt="" class="my-img">
    </div>
  </div>
</template>
<script>
export default {
  mounted(){
    this.drawPic()
  },
  methods:{
    drawPic(){
      //场景一
      let canvas = document.getElementById("my-canvas");
      let ctx = canvas.getContext('2d');
      let img = document.querySelector('.my-img');
      img.onload=function(){//为确保图片资源加载完毕，需要在onload方法里绘制
        ctx.drawImage(img,0,0,200,300);
      }
    }
  }
}
</script>
<style scoped>
.wrap-box{
  display: flex;
  align-items: center;
  padding:20px 0 0 50px;
}
#my-canvas{
  border: 1px solid orange;
}
.img-content{
  flex: 1;
}
.my-img{
  width: 200px;
  height: 300px;
}
</style>

场景二：图片未直接存在于页面，需通过接口请求或FileReader对象获取src路径，如何将指定src的图片资源绘制到Canvas上？

//场景二关键代码
<script>
export default {
  mounted(){
    this.drawPic()
  },
  methods:{
    drawPic(){
      //场景二
      let img = new Image();//创建一个Image对象
      img.src="xxx.png";//假设xxx.png是获取的scr参数
      img.onload = function(){//切记要在onload方法里绘制
        ctx.drawImage(img,150,100,200,300);
      }
    }
  }
}
</script>

以上为JavaScript Canvas实现代码绘图的详细内容，更多关于JavaScript Canvas绘图的技术资料，请参阅本站其他相关文章。

Vue项目中利用Canvas API进行图形与图片绘制详解

引言