码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2018-08-16 00:54:16      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:tca   使用   draw   com   close   define   arm   UNC   设置   

创建一个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的基本功能都已经实现了!

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

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

标签:tca   使用   draw   com   close   define   arm   UNC   设置   

原文地址:https://www.cnblogs.com/No-harm/p/9484454.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!