vue中canvas的使用

大帅_Jade
18,681 阅读3分钟

1.canvas简介

<canvas>是由HTML代码配合高度和宽度属性而定义出来的可绘制区域。它可以用来制作照片集或者制作简单的动画，甚至可以进行实时视频处理和渲染。

2.canvas基本使用

<canvas id='myCanvas' style='border:1px solid #000;width:600;height400'> </canvas>

可以通过使用style属性添加边框，width和height属性定义画布大小，如果不给<canvas>设置宽高属性时，默认宽为300px，高为150px。

canvas应该在mounted的生命周期中初始化，在created和updated中都是无效的。

export default {
  mounted() {
    this.initCancas()
  },
  methods: {
    initCancas() {      console.log("初始化canvas")
      let canvas = document.getElementById('myCanvas');  ------------  1      
      let ctx = canvas.getContext('2d');                 ------------  2
      ctx.fillStyle="#000";                              ------------  3
      ctx.fillRect(10,10,100,80);                        ------------  4
    }
  }
}


  1. 找到cancas元素；
  2. 创建context对象；getContext() 方法返回一个用于画布上绘图环境；参数 ‘2d’ 指定了画布上绘制的类型，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图API。了解别的参数查看MDN文档。
  3. 设置fillStyle属性可以是CSS颜色，渐变，或图案。
  4. fillRect(x,y,width,height) 方法定义了矩形当前的填充方式，x、y为坐标位置。

3.canvas坐标

canvas是一个二维网格，左上角坐标为（0，0），x轴向右为正，y轴向下为正，上面的fillRect方法拥有参数（10，10，100，80）意思是：在画布上绘制100x80的矩形，从坐标（10，10）开始。

4.响应式画布

当需要使用canvas铺满全屏时，直接使用css声明达不到理想的效果。

//错误的效果，会造成图像变形拉伸
canvas{
    width: 100px;
    height: 100px
}

正确的做法是给canvas的宽高赋值：

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
let winW = window.innerWidth
let winH = window.innerHeight
canvas.width = winW
canvas.height = winH

响应式画布：

let canvas;
let ctx;
export default {
  mounted() {
    this.initCancas()    // 当调整窗口大小时重绘canvas
    window.onresize = () => {
      this.initCanvas()
    }
  },
  methods: {
    initCanvas() {
      console.log("初始化canvas")
      canvas = document.getElementById('myCanvas');      
      ctx = canvas.getContext('2d');
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      this.drawCanvas()
    },
    drawCanvas() {
      ctx.beginPath();      
      ctx.moveTo(20, 20);      
      ctx.lineTo(140, 70);      
      ctx.lineWidth = 1.0;      
      ctx.strokeStyle = '#cc0000'      
      ctx.stroke()
    }
  }
}

5.简单的实例

1.在canvas上画线

  • moveTo(x,y) 定义线条开始坐标
  • lineTo(x,y) 定义线条结束坐标

例：定义开始坐标（0，0），结束坐标（200，100）绘制线条

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

2.绘制圆形

arc(x,y,r,start,stop,(false))

x--圆的中心x坐标，y--圆的中心y坐标，r--圆的半径，start--起始角，stop--结束角，true--非必填，规定是逆时针还是顺时针绘图，false为顺时针，true为逆时针

arc() 方法创建弧/曲线（用于创建圆或部分圆）。

注：如果通过arc( )来创建圆，把起始角设置为0，结束角设置为2*Math.PI

例: 使用arc( ) 方法绘制一个圆

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc( 10, 30, 40, 0, 2*Math.PI );
ctx.stroke();

3.绘制文字

使用canvas绘制文本，属性方法如下：

  • font--定义字体
  • fillText( text, x, y ) -- 在canvas上绘制实心的文本
  • strokeText( text, x, y ) -- 在canvas上绘制空心的文本

例：使用 ‘仿宋’ 字体在画布上绘制一个高 40 px的文字（实心）

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="40px 仿宋";
ctx.fillText("Hello World",10,20);

还有更多用法可以自己尝试


avatar
文章
阅读
粉丝