Canvas 实现一个画板

<canvas> 是HTML5的新标签,它是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素。

css样式:

 

<style>

    canvas {
        border: 1px solid red;
    }

</style>

 

 

body添加canvas标签 以及画笔的样式:

 <canvas></canvas>

    <br>
    粗细
    <select class=”width”>
        <option value=”1″>1</option>
        <option value=”2″>2</option>
        <option value=”3″>3</option>
        <option value=”4″>4</option>
    </select>
    颜色

<input class=”color” type=”color”>

 

js代码:

        获取canvas
var canvas = document.querySelector(‘canvas’)
        画笔粗细
var width = document.querySelector(‘.width’)
         画笔颜色
var color = document.querySelector(‘.color’)
        清除画板
var clear = document.querySelector(‘.clear’)
给画布设置宽高:
canvas.height = ‘300’
        canvas.width = ‘300’
获取工具箱:
var ctx = canvas.getContext(‘2d’)
绘制圆形的结束线帽:
ctx.lineCap = “round”;
按下画笔
       适配触摸屏
        先声明一个标志变量
        然后用户按下鼠标,就让这个变量变成 true,在painting === true 的情况下,我们才画线
let painting = false
let last

触摸板适配:

let isTouchDevice = ‘ontouchstart’ in document.documentElement;

        if (isTouchDevice) {
            canvas.ontouchstart = (f) => {
                let x = f.touches[0].clientX
                let y = f.touches[0].clientY
                last = [x, y]
            }
            canvas.ontouchmove = (f) => {
                let x = f.touches[0].clientX
                let y = f.touches[0].clientY
                drawLine(last[0], last[1], x, y)
                last = [x, y]
            }

}

pc:

else {

            canvas.addEventListener(‘mousedown’, function (e) {
                var x = e.offsetX;
                var y = e.offsetY;
                ctx.beginPath();
                function move(event) {
                    ctx.lineTo(event.offsetX, event.offsetY);
                    ctx.lineWidth = width.value;
                    ctx.strokeStyle = color.value;
                    ctx.stroke();
                }
                canvas.addEventListener(‘mousemove’, move)
                canvas.addEventListener(‘mouseup’, function () {
                    canvas.removeEventListener(‘mousemove’, move)
                })
            })

}

触摸端线路封装函数:

function drawLine(x1, y1, x2, y2) {

            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.closePath();
            ctx.stroke();

}

全部代码:

</head>

<style>
    canvas {
        border: 1px solid red;
    }
</style>
<body>
    <canvas></canvas>
    <br>
    粗细
    <select class=”width”>
        <option value=”1″>1</option>
        <option value=”2″>2</option>
        <option value=”3″>3</option>
        <option value=”4″>4</option>
    </select>
    颜色
    <input class=”color” type=”color”>
    <button class=”clear”>清空画板</button>
    <script>
        //获取canvas
        var canvas = document.querySelector(‘canvas’)
        //画笔粗细
        var width = document.querySelector(‘.width’)
        //画笔颜色
        var color = document.querySelector(‘.color’)
        //清除画板
        var clear = document.querySelector(‘.clear’)
        canvas.height = ‘300’
        canvas.width = ‘300’
        //获取工具箱F
        var ctx = canvas.getContext(‘2d’)
        //绘制圆形的结束线帽:
        ctx.lineCap = “round”;
        //按下画笔
        //适配触摸屏
        // 先声明一个标志变量
        // 然后用户按下鼠标,就让这个变量变成 true,在painting === true 的情况下,我们才画线
        let painting = false
        let last
        let isTouchDevice = ‘ontouchstart’ in
            document.documentElement;
        if (isTouchDevice) {
            canvas.ontouchstart = (f) => {
                let x = f.touches[0].clientX
                let y = f.touches[0].clientY
                last = [x, y]
            }
            canvas.ontouchmove = (f) => {
                let x = f.touches[0].clientX
                let y = f.touches[0].clientY
                drawLine(last[0], last[1], x, y)
                last = [x, y]
            }
        } else {
            canvas.addEventListener(‘mousedown’, function (e) {
                var x = e.offsetX;
                var y = e.offsetY;
                ctx.beginPath();
                function move(event) {
                    ctx.lineTo(event.offsetX, event.offsetY);
                    ctx.lineWidth = width.value;
                    ctx.strokeStyle = color.value;
                    ctx.stroke();
                }
                canvas.addEventListener(‘mousemove’, move)
                canvas.addEventListener(‘mouseup’, function () {
                    canvas.removeEventListener(‘mousemove’, move)
                })
            })
        }
        function drawLine(x1, y1, x2, y2) {
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.closePath();
            ctx.stroke();
        }
    </script>
</body>