Canvas简易画板

Canvas简易画板

canvas是一个通过JS获取‘2D’上下文来实现绘画的方式。

起手式

/*html*/

<canvas id="canvas"></canvas>

构建canvas画板，并获取‘2d’上下文

const canvas=document.querySelector("#canvas")
const ctx=canvas.getContext('2d')

ctx.fillStyle='red'
ctx.fillRect(0,0,20,20)

注意： ctx的api所用到的坐标都是以canvas画板的左上角为原点。 如果通过clientX/clientY获取到了页面坐标，要减去canvas距离页面的left/top值，才能用到api里面去。

绘制简单形状

ctx.fillStyle='red'   //填充颜色
ctc.strokeStyle='black'  //边框颜色
ctx.lineWidth='4'        //画笔线宽4px

ctx.fillRect(0,0,10,10)  //在画板(0px,0px)的位置填充一个边为4px的矩形

ctx.arc(10,10,5,0,Math.PI,false)
ctx.stroke()       //在(10px,10px)位置画一个顺时针从0到π的圆弧

ctx.beginPath()  //新路径开始
ctx.moveTo(10,10)  //画笔落笔点
ctx.lineTo(20,10)  //从(10px,10px)连线到(20px,10px)
ctx.lineTo(20,20)  //从(20px,10px)到(20px,20px)
ctx.closePath()    //闭合路径，形成三角形
ctx.stroke()       //描边，显示到画板

触屏绘画

下面是我在做canvas画板时，封装的绘画方法。

class Db{
	constructor(){
    	this.paiting=false
        this.isLine=true  //启动画线
        this.isRect=false  //启动画矩形
        this.isArc=false   //启动画圆
        this.start=null
        /*其他状态...*/
    }
	/其他方法.../
    paint(container, ctx, top) {
        const isTouchDevice = 'ontouchstart' in document.documentElement;
        let { painting, start, drawLine, pushPaint, isLine, isRect, isArc } = this
        let _this = this
        if (isTouchDevice) {//判断是否为触屏
            let last = []
            container.ontouchstart = function (e) {
                let x = e.touches[0].clientX;
                let y = e.touches[0].clientY;
                start = [x, y]
            }
            container.ontouchmove = function (e) {
                painting = true
                let x = e.touches[0].clientX;
                let y = e.touches[0].clientY;
                last = [x, y]
                if (isLine) {
                    drawLine(ctx, start[0], start[1], x, y, top);//调用画线方法
                    start = [x, y]
                }

            }
            container.ontouchend = function (e) {
                if (isLine) { }
                if (start && painting && isRect) { //调用画矩形函数
                    _this.drawRect(ctx, start[0], start[1], last[0], last[1], top)
                }
                if (start && painting && isArc) {
                    let dep = Math.sqrt(Math.pow((last[0] - start[0]), 2) + Math.pow((last[1] - start[1]), 2));
                    _this.drawArc(ctx, start[0], start[1], dep, top)
                }
                pushPaint.call(_this, container)
                painting = false
                start = null
            }
        } else { //在客户端上
            container.onmousedown = function (e) {
                start = [e.clientX, e.clientY]
                if (isLine) {
                    painting = true;
                }
                if (isRect) { }
                if (isArc) { }
            }
            document.onmousemove = function (e) {
                if (isLine) {
                    if (painting === true) {
                        drawLine(ctx, start[0], start[1], e.clientX, e.clientY, top)
                        start = [e.clientX, e.clientY]
                    }
                }
                if (isRect) { }
                if (isArc) { }

            }
            document.onmouseup = function (e) {
                let x = e.clientX
                let y = e.clientY
                if (isLine) {
                    painting = false;
                }
                if (start && isRect) {
                    _this.drawRect(ctx, start[0], start[1], x, y, top)
                }
                if (start && isArc) {
                    let dep = Math.sqrt(Math.pow((x - start[0]), 2) + Math.pow((y - start[1]), 2));
                    _this.drawArc(ctx, start[0], start[1], dep, top)
                }
                pushPaint.call(_this, container)
                start = null
            }
        }
    }
}