javaScript 利用canvas实现简单画板

最新推荐文章于 2023-11-01 19:51:12 发布
最新推荐文章于 2023-11-01 19:51:12 发布
阅读量993 收藏 3
点赞数
分类专栏： javascript html5 文章标签： javascript html canvas 鼠标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27009579/article/details/71535684
版权

本文主要实现画板基本功能和介绍canvas的具体的使用

<1> 实现鼠标绘制功能

首先是HTML代码：
直接在body中添加canvas标签

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

js代码：

$(function() {

    var mycanvas = document.getElementById("mycanvas");
    var ctx = mycanvas.getContext("2d");
    var mX = 0;
    var mY = 0;
    var isDraw = false;
    var width = document.documentElement.clientWidth;
    var height = document.documentElement.clientHeight;
    mycanvas.width = width;
    mycanvas.height = height;

    ctx.lineWidth = "2";  //设置画笔的大小
    ctx.strokeStyle = "#FFA500";  //设置画笔的颜色

    $("#mycanvas").on("mousedown", function(e) {
        isDraw = true;
        mX =e.pageX;   //记录按下的位置X
        mY = e.pageY;  //记录按下的位置Y

    });
    $("#mycanvas").on("mousemove", function(e) {
        if(isDraw) {
            var tX = e.pageX;
            var tY = e.pageY;
            draw(mX,mY,tX,tY);
        }
    });

    $("#mycanvas").on("mouseup", function(e) {
        isDraw=false;
    });

    function draw(ox, oy, newX, newY) {
        ctx.beginPath();   //开始
        ctx.moveTo(ox, oy);  //移动到...
        ctx.lineTo(newX, newY);   //To...
        ctx.stroke();  //绘制
        mX = newX;
        mY = newY;
        ctx.closePath();  //结束
    }

});

其中需要注意的是，在CSS中给canvas设置的宽高和在标签中设置width和height是不一样的，建议在js中重新设置宽高

    mycanvas.width=document.documentElement.clientWidth;
    mycanvas.height=document.documentElement.clientHeight

到这个时候已经实现可以用鼠标在画布上绘制了。

<2>实现绘制图案功能
先从绘制直线开始

/**
 * 
 * @param {Object} ox   起点X
 * @param {Object} oy   起点Y
 * @param {Object} newX  终点X
 * @param {Object} newY  终点Y
 */
    function drawLine(ox, oy, newX, newY) {
        ctx.beginPath();
        ctx.moveTo(ox, oy);
        ctx.lineTo(newX, newY);
        ctx.stroke();
        ctx.closePath();
    }

在mousemove事件中调用该方法，鼠标拖动绘制时会出现以下效果：
这里写图片描述
这显然不是想要的效果，原因是在拖动的时候会不停的绘制直线（问题1）

（问题1）解决办法：每次绘制之前，先清理画板

function drawLine(ox, oy, newX, newY) {
        ctx.clearRect(0, 0, width, height);   //清除整个画板，width和height都等于浏览器的大小
        ctx.beginPath();
        ctx.moveTo(ox, oy);
        ctx.lineTo(newX, newY);
        ctx.stroke();
        ctx.closePath();
    }

这样可以绘制出一条直线的效果了；
但当绘制第二条的时候，第一条直线却被清除了，原因在于每次绘制前都把画布给清理一遍了ctx.clearRect(0, 0, width, height)，（问题2）

（问题2）解决办法：
我们应该在每次绘制后，先将画布上的内容保存一份出来，在下次绘制时先清理画布，然后把保存的内容重新绘制出来，再进行接下来的动作。
在这里使用到canvas的两个方法putImageData和getImageData，分别对应绘制数据和获取画布数据，
先创建一个数组用于保存画布数据：

var imageData = [];

在松开鼠标的时候便保存画布数据，所以在mouseup事件中：

imageData.push(ctx.getImageData(0, 0, width, height));

数据保存后，在清理画布之后要绘制出来：

    function drawLine(ox, oy, newX, newY) {
        ctx.clearRect(0, 0, width, height);
        if(imageData.length > 0)
            ctx.putImageData(imageData[imageData.length - 1], 0, 0, 0, 0, width, height);  //将数据显示在画布上
        ctx.beginPath();
        ctx.moveTo(ox, oy);
        ctx.lineTo(newX, newY);
        ctx.stroke();
        ctx.closePath();
    }

至此，我们就完成绘制直线的功能了。
绘制矩形和圆形，思路都是一样的

    function drawRect(startX, startY, endX, endY) {
        ctx.clearRect(0, 0, width, height);
        if(imageData.length > 0)
            ctx.putImageData(imageData[imageData.length - 1], 0, 0, 0, 0, width, height);
        ctx.beginPath();
        ctx.rect(startX, startY, endX - startX, endY - startY);  //创建矩形
        ctx.stroke();
        ctx.closePath();
    }

    function drawArc(startX, startY, endX, endY) {
        ctx.clearRect(0, 0, width, height);
        if(imageData.length > 0)
            ctx.putImageData(imageData[imageData.length - 1], 0, 0, 0, 0, width, height);
        ctx.beginPath();
        var radius = Math.abs(Math.max((endX - startX), (endY - startY)));
        //创建圆形,参数分别对应：圆心X，圆心Y，半径，起点（时钟3点方向为0度），终点 PI=180度，从0度开始
        ctx.arc(startX, startY, radius, 0, 2 * Math.PI);   
        ctx.stroke();
        ctx.closePath();
    }

注：上述画圆效果可能和想象中不一样（请自行测试），现提供另一种效果（效果请自行测试）：

//代码不是很复杂，就不多做解析了
function drawArc2(startX, startY, endX, endY) {
        ctx.clearRect(0, 0, width, height);
        if(imageData.length > 0)
            ctx.putImageData(imageData[imageData.length - 1], 0, 0, 0, 0, width, height);

        var offsetX = Math.abs(endX - startX);
        var offsetY = Math.abs(endY - startY);
        var radius = offsetX > offsetY ? offsetY / 2 : offsetX / 2;

        ctx.beginPath();
        if((endX - startX) < 0 && (endY - startY) < 0) {
            ctx.arc(startX - radius, startY - radius, Math.abs(radius), 0, 2 * Math.PI);
        } else if(endX - startX < 0) {
            ctx.arc(startX - radius, startY + radius, Math.abs(radius), 0, 2 * Math.PI);
        } else if(endY - startY < 0) {
            ctx.arc(startX + radius, startY - radius, Math.abs(radius), 0, 2 * Math.PI);
        } else {
            ctx.arc(startX + radius, startY + radius, Math.abs(radius), 0, 2 * Math.PI);
        }

        ctx.stroke();
        ctx.closePath();

    }

到现在，基本的画板功能都已经实现了，最后，当然少不了橡皮擦：

    function eraser(x, y) {
        var o = 5;  //擦除区域大小
        ctx.clearRect(x - o, y - o, o * 2, o * 2);
    }

很简单，和清除画布一样，只是把清除的区域限制好就行了。

最后,附上完整一点的代码：

$(function() {

    var imageData = [];
    var mycanvas = document.getElementById("mycanvas");
    var ctx = mycanvas.getContext("2d");
    var mX = 0;
    var mY = 0;
    var isDraw = false;
    var width = document.documentElement.clientWidth;
    var height = document.documentElement.clientHeight;
    mycanvas.width = width;
    mycanvas.height = height;

    ctx.lineWidth = "2";
    ctx.strokeStyle = "#FFA500";

    $("#mycanvas").on("mousedown", function(e) {
        isDraw = true;
        mX = e.pageX;
        mY = e.pageY;
        //eraser(mX,mY);

    });
    $("#mycanvas").on("mousemove", function(e) {
        if(isDraw) {
            var tX = e.pageX;
            var tY = e.pageY;
            //draw(mX,mY,tX,tY);
            //drawLine(mX, mY, tX, tY);
            //drawRect(mX, mY, tX, tY);
            //drawArc(mX, mY, tX, tY);
            //drawArc2(mX, mY, tX, tY);
            //eraser(tX,tY);
        }
    });

    $("#mycanvas").on("mouseup", function(e) {
        isDraw = false;
        imageData.push(ctx.getImageData(0, 0, width, height));
    });

    function draw(ox, oy, newX, newY) {
        ctx.beginPath();
        ctx.moveTo(ox, oy);
        ctx.lineTo(newX, newY);
        ctx.stroke();
        mX = newX;
        mY = newY;
        ctx.closePath();
    }

    /**
     * 绘制直线
     * @param {Object} ox   起点X
     * @param {Object} oy   起点Y
     * @param {Object} newX  终点X
     * @param {Object} newY  终点Y
     */
    function drawLine(ox, oy, newX, newY) {
        ctx.clearRect(0, 0, width, height);
        if(imageData.length > 0)
            ctx.putImageData(imageData[imageData.length - 1], 0, 0, 0, 0, width, height);
        ctx.beginPath();
        ctx.setLineDash([5, 15]);
        ctx.moveTo(ox, oy);
        ctx.lineTo(newX, newY);
        ctx.stroke();
        ctx.closePath();
    }

    /**
     * 绘制矩形
     * @param {Object} startX
     * @param {Object} startY
     * @param {Object} endX
     * @param {Object} endY
     */
    function drawRect(startX, startY, endX, endY) {
        ctx.clearRect(0, 0, width, height);
        if(imageData.length > 0)
            ctx.putImageData(imageData[imageData.length - 1], 0, 0, 0, 0, width, height);
        ctx.beginPath();
        ctx.rect(startX, startY, endX - startX, endY - startY);
        ctx.stroke();
        ctx.closePath();
    }

    function drawArc(startX, startY, endX, endY) {
        ctx.clearRect(0, 0, width, height);
        if(imageData.length > 0)
            ctx.putImageData(imageData[imageData.length - 1], 0, 0, 0, 0, width, height);
        ctx.beginPath();
        var radius = Math.abs(Math.max((endX - startX), (endY - startY)));
        ctx.arc(startX, startY, radius, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.closePath();

    }

    function drawArc2(startX, startY, endX, endY) {
        ctx.clearRect(0, 0, width, height);
        if(imageData.length > 0)
            ctx.putImageData(imageData[imageData.length - 1], 0, 0, 0, 0, width, height);

        var offsetX = Math.abs(endX - startX);
        var offsetY = Math.abs(endY - startY);
        var radius = offsetX > offsetY ? offsetY / 2 : offsetX / 2;

        ctx.beginPath();
        if((endX - startX) < 0 && (endY - startY) < 0) {
            ctx.arc(startX - radius, startY - radius, Math.abs(radius), 0, 2 * Math.PI);
        } else if(endX - startX < 0) {
            ctx.arc(startX - radius, startY + radius, Math.abs(radius), 0, 2 * Math.PI);
        } else if(endY - startY < 0) {
            ctx.arc(startX + radius, startY - radius, Math.abs(radius), 0, 2 * Math.PI);
        } else {
            ctx.arc(startX + radius, startY + radius, Math.abs(radius), 0, 2 * Math.PI);
        }

        ctx.stroke();
        ctx.closePath();

    }

    function eraser(x, y) {
        var o = 5;
        ctx.clearRect(x - o, y - o, o * 2, o * 2);
    }

});

关于鼠标事件，选择绘制什么图案，就需要自己去做选择了。

Hellokuki
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
通过canvas实现简易画板
11-26
刚开始学HTML5中的canvas，实现的一个简易的画板。（只注重了功能的实现，没有对样式添加太多）
Canvas写一个画板
weixin_56674431的博客
04-04 584
html5的canvas做一个简易的画板
用html+js的canvas创建一个画板【建议收藏】
小魏快起床的博客
02-22 775
在浏览器创建一个画板，可以随意涂涂画画，还可以下载自己画好的作品，简单实用。
canvas基本语法及实例
zhangxiang_1102的博客
02-26 956
canvas &lt; canvas&gt;标签其实就相当于一个容器，一个可以展示绘图内容的画板。我们需要通过 js 脚本往里面绘制图形。Canvas 只能展示绘图的内容， 但是不能进行绘图。最早是 苹果公司 提出的该标签。(游戏 、可视化数据(图表)、banner 广告） 1） 使用 canvas 标签, 即可在页面中开辟一格区域. 可以设置其 width 和 height 设置该区域的尺寸...
HTML5 Canvas
weixin_34198583的博客
01-01 190
2019独角兽企业重金招聘Python工程师标准>>> ...
JS中canvas实现一个简单画板
hohocj的博客
10-27 1738
效果图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ...
canvas实现一个简易画板
notagoodwriter的博客
11-08 830
canvas实现基础画板
150行代码实现一个极简的Canvas多功能画板
最新发布
~~~
11-01 2640
HTML5提供的Canvas标签能实现很多有趣的效果，本文就来分享一下如何使用Canvas来实现一个极简的多功能画板。主要功能包括：画笔、橡皮擦、清屏、前进和后退。
基于canvas实现的多功能画板
weixin_44719258的博客
09-23 747
基于canvas实现的多功能画板，目前已完成第一版，功能包括画笔、橡皮擦、撤回、清除画板、保存、图层、拖拽...
原生小案例：如何使用HTML5 Canvas构建画板应用程序
前端达人
08-23 895
使用HTML5 Canvas构建绘图应用是在Web浏览器中创建交互式和动态绘图体验的绝佳方式。HTML5 Canvas元素提供了一个绘图表面，允许您操作像素并以编程方式创建各种形状和图形。本文将为您提供使用HTML5 Canvas创建绘图应用的概述和指导。此外，它还将通过解释HTML设置、JavaScript实现、用户交互和绘图功能来帮助您理解构建绘图应用的步骤。HTML canvas标签是一个H...
canvas实现的画板
05-18
用html5的canvas实现的一个简易的画板，可以画直线、矩形、圆形，可以选择线条粗细和线条颜色’
html5 canvas实现的绘图工具自由绘制图形画板源码
01-19
html5 canvas实现的绘图工具自由绘制图形画板源码 有很多功能
canvas实现画板工具
04-27
前端代码 博文链接：https://lfwer.iteye.com/blog/2414822
JavaScript+Canvas实现自定义画板的示例代码
12-13
以下使用JavaScript结合Canvas实现一个画板功能 效果演示图： 代码部分（直接复制便可使用） <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>JavaScript+Canvas实现...
javascript+Canvas实现画板功能
11-20
本文实例为大家分享了Canvas实现画板功能的具体代码，供大家参考，具体内容如下 CSS样式代码 body, html { text-align: center; padding-top: 20px; /*margin: 0;*/ } canvas { box-shadow: 0 0 10px #333; ...
Javascript HTML5 Canvas实现的一个画板
10-22
主要介绍了Javascript HTML5 Canvas实现的一个画板的相关资料,需要的朋友可以参考下
用javascript实现画板的代码
10-30
用javascript实现画板的代码
html5 像素风画板,使用Canvas和JavaScript做一个画板
weixin_42106357的博客
06-04 708
前些天学习了HTML5的元素，今天就来实践一下，用canvas做一个画板。首先说一下要实现的功能：切换画笔颜色调整笔刷粗细清空画布橡皮擦擦除撤销操作保存成图片兼容移动端(支持触摸)准备工作首先，准备个容器,也就是画板了。然后初始化js：let canvas = document.getElementById("drawing-board");let ctx = canvas.getContext(...
canvas实现画板功能
weixin_48956666的博客
07-16 561
canvas实现画板功能
canvas电子画板
09-15
同时，也可以利用JavaScript库（如Fabric.js或Paper.js）来简化Canvas的开发过程，提供更多功能和便捷的绘图工具。 希望这些信息能对你有所帮助！如果你有更多关于Canvas电子画板的问题，我会尽力回答。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值