canvas

canvas元素

<canvas id="box" width="800px" height="500px" style="border: 1px solid pink;"></canvas>
<script>
    let canvasDOM = document.getElementById('box');
    let cav = canvasDOM.getContext('2d');
</script>

绘制线段

// 线段，两点一线
// 设置起点
cav.moveTo(150,100);
// 设置终点
cav.lineTo(300,100);
// 设置线段颜色
cav.strokeStyle = 'skyblue';
// 设置线段宽度
cav.lineWidth = '8'
// 绘制线段
cav.stroke()

通过stroke方法构建画板

canvasDOM.onmousedown = function (event) {
    let event = e || window.event
    var x = event.clientX - this.offsetLeft - parseInt(this.style.borderLeftWidth)
    var y = event.clientY - this.offsetTop - parseInt(this.style.borderTopWidth)
    cav.moveTo(x, y);

    canvasDOM.onmousemove = function (event) {
        var x2 = event.clientX - this.offsetLeft - parseInt(this.style.borderLeftWidth)
        var y2 = event.clientY - this.offsetTop - parseInt(this.style.borderTopWidth)
        cavs.lineTo(x2, y2)
        cav.stroke()
    }

    canvasDOM.onmouseup = function (event) {
        canvasDOM.onmousemove = null
    }
}

绘制路径

cav.beginPath();

cav.moveTo(200,100);
cav.lineTo(200,200);
cav.lineTo(300,200);

cav.closePath();

cav.strokeStyle = 'skyblue';
cav.lineWidth = '5';

cav.fillStyle = 'pink';
cav.fill()

cav.stroke()

绘制矩形

cav.fillStyle = 'skyblue'
// 绘制填充矩形
// fillRect(x,y,width,height)
cav.fillRect(100,100,300,200)

cav.strokeStyle = 'pink'
cav.lineWidth = 8

// 绘制矩形边框
cav.strokeRect(100,100,300,200)
// clearRect 在给定的矩形内清除指定的像素
cav.clearRect(125,125,100,100)