vue中使用canvas繪圖詳解

更新時(shí)間：2024年09月06日 09:04:02 作者：@小魚游啊游

這篇文章主要介紹了vue中使用canvas繪圖方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

canvas基本使用

HTML5 的 <canvas> 元素使用 JavaScript 在網(wǎng)頁上繪制圖像。

畫布是一個(gè)矩形區(qū)域，您可以控制其每一像素。

canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

路徑線段

<template lang="pug">
    div
    	// 規(guī)定矩形區(qū)域的寬和高
        <canvas id="myCanvas" width="500" height="300"></canvas>
</template>

<script>
export default {
    data() {
        return {}
    },
    mounted() {
        this.xianDuan()
    },
    methods: {
        xianDuan(){
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            ctx.moveTo(0,0);      // moveTo(x,y) 定義線條開始坐標(biāo)
            ctx.lineTo(200,100);  // lineTo(x,y) 定義線條結(jié)束坐標(biāo)
            ctx.stroke();
        },
    }
}
</script>

運(yùn)行效果：

三角形

無填充色

mounted() {
	this.sanJiaoXing()
},
methods: {
    sanJiaoXing(){
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(100, 200);
        ctx.lineTo(400, 200);
        ctx.lineTo(0, 0);
        ctx.stroke();     // 無填充色
    },
}

運(yùn)行效果：

有填充色

mounted() {
	this.sanJiaoXing()
},
methods: {
    sanJiaoXing(){
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(100, 200);
        ctx.lineTo(400, 200);
        ctx.lineTo(0, 0);
        ctx.fill();     // 有填充色
    },
}

圓

使用 arc() 方法繪制一個(gè)圓：

mounted() {
    this.yuan()
},
methods: {
    yuan() {
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.beginPath();
        ctx.arc(95,50,40,0,2*Math.PI);    // Math.PI圓周率π = 3.14 = 180°
        ctx.stroke();
    },
}

canvas實(shí)現(xiàn)笑臉

mounted() {
    this.xiaoLian()
},
methods: {
    xiaoLian() {
        let canvas = document.getElementById('myCanvas');
        let 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); // 口(順時(shí)針)
        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.stroke();
    },
}

字體

mounted() {
    this.ziTi()
},
methods: {
    ziTi() {
        let canvas = document.getElementById("myCanvas");
        let ctx = canvas.getContext("2d");
        ctx.font="30px Arial";       // 設(shè)置字體及大小
        ctx.fillText("Hello World 泥巴巴", 10, 150);    // 實(shí)心文字
        ctx.strokeText("Hello World 泥巴巴", 10, 180);  // 空心文字
    }
}

漸變

mounted() {
    this.jianBian()
},
methods: {
    jianBian() {
        let canvas = document.getElementById("myCanvas");
        let ctx = canvas.getContext("2d");
        var grd = ctx.createLinearGradient(0, 0, 200,0);  // 設(shè)置漸變
        grd.addColorStop(0,"red");   // 漸變起始顏色
        grd.addColorStop(1,"orange");   // 漸變結(jié)束色
        ctx.fillStyle = grd;         // 填充色
        ctx.fillRect(10,10,200,100); // (x,y,width,height) 矩形坐標(biāo)和寬高
    }
}