canvas知識梳理

什麼是canvas

• canvas是html5新增的一個圖形繪製元素，經過腳原本完成，一般是用js來繪製。canvas標籤只是圖形的容器，能夠經過canvas來繪製路徑、盒、圓、字符及圖像。

利用canvas畫圖的代碼示例

1.繪製圓弧

<template>
	<div class = 'canvas'>
		<canvas id= 'myCanvas' width = '500' height = '500'></canvas>
	</div>
</template>	

<script>
	export default {
    	data(){
        	return {}
	},
    mounted(){
    //獲取canvas畫布對象
	let myCanvas = document.getElementById('myCanvas');
	//獲取畫筆
    let ctx = myCanvas.getContext('2d')
    //一、繪製圓弧、圓
	//開啓路徑
    ctx.beginPath()
    //繪製圓弧
    ctx.arc(200,200,200,0,Math.PI,false)
    //arc的參數爲(x,y,r,sAngle,eAngle,是否逆時針)
    //圓心x,y軸座標，r圓半徑，sAngle起始角，eAngle結束角，最有一個是是都爲逆時針。
    //關閉路徑
    ctx.closePath()
    }
	}
</script>
複製代碼

2. 繪製座標軸

<template>
	<div class = 'canvas'>
		<canvas id= 'myCanvas' width = '500' height = '500'></canvas>
	</div>
</template>	

<script>
	export default {
    	data(){
        	return {}
	},
    mounted(){
    //獲取canvas畫布對象
	let myCanvas = document.getElementById('myCanvas');
	//獲取畫筆
    let ctx = myCanvas.getContext('2d')
	//開啓路徑
    ctx.beginPath()
    
    this.line(ctx, 20, 20, 390, 20);
    this.line(ctx, 380, 15, 390, 20);
    this.line(ctx, 380, 25, 390, 20);
    this.line(ctx, 20, 20, 20, 390);
    this.line(ctx, 15, 380, 20, 390);
    this.line(ctx, 25, 380, 20, 390);
    ctx.closePath();
    //設置字體屬性
    ctx.font = "20px 楷體";
    //設置字體
    ctx.fillText("座標軸", 15, 15);
    ctx.fillText("x軸", 370, 40);
    ctx.fillText("y軸", 30, 385);
    //關閉路徑
    ctx.closePath()
    },
    methods:{
    	line(ctx,sx,sy,ex,ey){
    		ctx.moveTo(sx,sy)
            ctx.lineTo(ex,ey)
            ctx.stroke()
    	}
    }
	}
</script>
複製代碼

3. 繪製矩形

//描邊矩形
ctx.strokeRect(40,40,100,100)
//矩形的起始點爲x軸40，y軸40，寬100，高100
//填充矩形
ctx.fillRect(140,140,100,100)
複製代碼

4. 弧度和角度的相轉換

//角度轉弧度
function toRad(angle){
	return angle*Math.PI/180
}
//弧度轉角度
function toAngle(rad){
	return rad*180/Math.PI
}
複製代碼

5. 獲取鼠標在元素上的座標

let C = {}
    let canvas = document.getElementById("myCanvas");
    C.getOffset = function (ele) {
        let mouse = { x: 0, y: 0 }
        ele.addEventListener('mousemove', function (e) {
            let { x, y } = C.eventWrapper(e)
            mouse.x = x;
            mouse.y = y;
        })
        return mouse
    }
    //座標系的轉換
    C.eventWrapper = function (ev) {
        let { pageX, pageY, target } = ev
        console.log(target)
        let { left, top } = target.getBoundingClientRect();
        return { x: pageX - left, y: pageY - top }
    }
    let pot = C.getOffset(canvas)
    canvas.onclick = function () {
        console.log(pot)
    }
複製代碼