[JavaScript]创建一个canvas画板-小结(1)

创建一个canvas画板

项目链接：GitHub

项目预览：Github Pages

项目描述：通过MDN提供的教程和API，创建一个拥有基本功能（包括绘画，橡皮擦，保存等）的canvas画板。

在教程的学习过程中，掌握canvas的基本用法，以及需要注意的一些地方。

开始创建一块画板

首先我们要在HTML中创建一个canvas

<canvas id="canvas" width="300" height="300"></canvas>

这样我们就可以在页面中创建一个宽高为300*300px的画板了。

可是，这么一小块画板，可能都不够我们画一个小猪佩奇，我们想要画板变得更大一点，最好是一块全屏画板，该怎么设置呢？

首先我们可以看一下MDN中关于canvas尺寸的说明：

<canvas> 看起来和 <img> 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，<canvas> 标签只有两个属性—— width和height。这些都是可选的，并且同样利用 DOM properties 来设置。当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为>150像素。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。

根据MDN提供的信息，我们可以知道，尽量不推荐使用CSS来直接，那么我们可以采用这个方案：用JavaScript来控制canvas的宽高

var pageWidth = document.documentElement.clientWidth
var pageHeight = document.documentElement.clientHeight
canvas.width = pageWidth
canvas.height = pageHeight

这样就可以把canvas的尺寸设置为全屏了。
但是看起来不是很好看，我们把他优化一下，封装成一个函数：

setCanvasSize()
function setCanvasSize(canvas) {
    function pageSize(){
        // 设置canvas的宽高为全屏
        var pageWidth = document.documentElement.clientWidth
        var pageHeight = document.documentElement.clientHeight
        canvas.width = pageWidth
        canvas.height = pageHeight
    }
    
    pageSize()
    
    // 当用户拉伸窗口时，改变canvas的宽高
    window.onresize = function() {
        pageSize()
    }
}

画板创建完毕，接下来：

监听用户的鼠标动作

首先根据教程的步骤获得渲染上下文和它的绘画功能

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')

确定绘画功能并把他包装成函数

function drawLine(x1, y1, x2, y2) {
    // 开始绘画动作  
    ctx.beginPath()
    //黄色的线
    ctx.strokeStyle = "yellow"
    // 绘画的开始坐标
    ctx.moveTo(x1, y1)
    // 绘画路径的宽度
    ctx.lineWidth = 2
    // 绘画的结束坐标
    ctx.lineTo(x2, y2)
    ctx.stroke()
    // 绘画结束
    ctx.closePath()
}

创建一个标记，用来判断用户鼠标点击状态（如果为fales,则鼠标松开；如果为true，则鼠标按下）

var using = false

创建一个橡皮擦，点击时触发事件，不能绘画，只能擦除

<button id="eraser">橡皮檫</button>

var eraserEnabled = false
eraser.onclick = function() {
    eraserEnabled = true
}

创建函数，分别监听鼠标不同状态，根据状态判断是否绘画

listenToMouse(canvas,ctx)

function listenToMouse(canvas, ctx) {
    // 确定用户点击的此刻坐标
    var lastPoint = { x: undefined, y: undefined }

    // 画圆
    function drawCir(x, y, radius) {
        ctx.beginPath()
        ctx.arc(x, y, radius, 0, 360)
        ctx.fill()
    }

    // 画线
    function drawLine(x1, y1, x2, y2, ) {
        ctx.beginPath()
        ctx.strokeStyle = "yellow"
        ctx.moveTo(x1, y1)
        ctx.lineWidth = 2
        ctx.lineTo(x2, y2)
        ctx.stroke()
        ctx.closePath()
    }

    canvas.onmousedown = function (keyWord) {
        var x = keyWord.clientX;
        var y = keyWord.clientY;
        if (eraserEnabled) {
            using = true
            ctx.clearRect(x, y, 10, 10)
        } else {
            // 确定此刻用户所点击的坐标，以配合下一个点的坐标
            using = true;
            lastPoint = { x: x, y: y }
            drawCir(x, y, 2)
        }
    }
    canvas.onmousemove = function (keyWord) {

        var x = keyWord.clientX;
        var y = keyWord.clientY;

        if (eraserEnabled) {
            if (using) {
                ctx.clearRect(x, y, 10, 10)
            }
        } else {
            if (using) {
                var newPoint = { x: x, y: y }
                drawCir(x, y, 2)
                drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y)
                //这句话很重要
                lastPoint = newPoint
            }
        }
    }
    canvas.onmouseup = function (keyWord) {
        using = false
    }
}

画板已经基本完成了，我们来给画板增加一个“画笔”按钮，以便于用户切换，逻辑实现也更加顺滑（当用户点击“画笔”可以绘画，点击“橡皮擦”可以擦除）

<div id="action" class="action">
    <button id="eraser">橡皮檫</button>
    <button id="brush">画笔</button>
</div> 

//启用橡皮擦/画笔
var eraserEnabled = false
eraser.onclick = function() {
    eraserEnabled = true
    action.className = "action x"
}
brush.onclick = function() {
    eraserEnabled = false
    action.className = "action"
}

我们的canvas的基本功能都已经实现了！

接下来可以为他完善更多的功能。