【js案例】使用js制作写字画布

最新推荐文章于 2024-08-07 05:09:36 发布
最新推荐文章于 2024-08-07 05:09:36 发布
阅读量1.4k 收藏 3
点赞数
分类专栏： 前端

canvas实现画板功能

需求分析 
1.具有基本的铅笔功能 
2.即时直线绘制 
3.即时绘制矩形 
4.即时圆形 
5.即时橡皮擦 
7.插入图片 
8.把画板保存为图片并下载 //此处还没做好，画板底色是黑色的 
9.选择颜色 
10.选择线条粗细

Setp1:构建网页基本样式

html代码

    <!--可选操作-->
    <div id="select">
        <button id="pen">铅笔</button>
        <button id="line">直线</button>
        <button id="rect">矩形</button>
        <button id="arc">圆形</button>
        <button id="robber">橡皮檫</button>
        <button id="img">图片</button>
        <button id="save">保存</button>
        <input type="file" id="file" name="img" style="display: none"/>
        <input type="color" id="color"/>
        <input type="number" id="lineWidth"/>
    </div>

    <!--画板-->
    <canvas id="penal" width="800" height="800"></canvas>

css代码

    /*只有一句，用来初始化画板颜色*/
    #penal {
        width: 800px;
        height: 800px;
        background-color: #ccc;
    }

Step2:构造实现画板各个功能的js代码

1.构造Draw()类，并初始化必要的参数

    var Draw = function(){
        this.type = 'pen';  //选项类型，默认为铅笔
        this.penal = document.getElementById('penal');
        this.pen = this.penal.getContext('2d');
        this.isDraw = false;    //绘画开关
        this.color = document.getElementById('color');
        this.lineWidth = document.getElementById('lineWidth');
        this.select = document.getElementById('select');    //选择面板
        this.img = new Image();//用于动态绘制直线，矩形，圆形
    };

2.这里只需要构造一个初始化函数init()

初始化函数内部需要用到的变量

    Draw.prototype.init = function(){
        var self = this;
        var originX = null;
        var originY = null;
    }

先绑定选择操作

    this.select.addEventListener('click',function(event){
        if(event.target.id == 'pen'){
            self.type = 'pen';
        }else if(event.target.id == 'line'){
            self.type = 'line';
        }else if(event.target.id == 'rect'){
            self.type = 'rect';
        }else if(event.target.id == 'arc'){
            self.type = 'arc';
        }else if(event.target.id == 'robber'){
            self.type = 'robber';
        }else if(event.target.id == 'img'){
            document.getElementById('file').click();    //默认触发选择文件操作
            document.getElementById('file').onchange = function(e){
                var reader = new FileReader();          //这是H5新增加的读取文件函数
                reader.readAsDataURL(e.target.files[0]);
                reader.onload = function(ent){          //文件读取完毕后触发操作
                    var img = new Image();
                    img.src = ent.target.result;        //读取的结果默认存放在result上
                    self.pen.drawImage(img,0,0);        //把图片直接画在画布上
                }
            }
        }
        else if(event.target.id == 'save'){
            var a = document.createElement('a');
            a.href = self.penal.toDataURL('image/png');     //把画布转化为base64
            a.download = 'image.jpeg';
            a.id = 'download';
            a.innerHTML = 'download';
            document.body.appendChild(a);
            document.getElementById('download').style.display = 'none';
            document.getElementById('download').click();    //默认出发下载操作

        }
    },false);

可以知道当绘画时，mousedown事件触发时，需要把this.isDraw = true,同时记录鼠标所在坐标，获取选择的color和linewidth,并开启绘画路径

    this.penal.addEventListener('mousedown',function(event){
        self.isDraw = true;
        originX = event.clientX - self.penal.offsetLeft;    //原点x坐标
        originY = event.clientY - self.penal.offsetTop;     //原点y坐标
        self.pen.moveTo(originX, originY);
        self.pen.strokeStyle = self.color.value;
        self.pen.lineWidth = self.lineWidth.value;
        self.pen.beginPath();

    },false);

然后当触发mouseup事件时，可知需要结束绘画，若鼠标离开画布，即mouseleave时，也需要结束绘画，这部分很简单只需把this.isDraw = false和关闭绘画路径

    this.penal.addEventListener('mouseleave', function () {
        if(self.isDraw){
            self.pen.closePath();
            self.isDraw = false;
        }
    },false);
    this.penal.addEventListener('mouseup', function (event) {
        if(self.isDraw){
            self.pen.closePath();
            self.isDraw = false;
        }
    },false);

接下来就是最难的部分的，当mouseover时，需要即时绘制 
先实现铅笔功能

    this.penal.addEventListener('mousemove',function(event){
        //只有可绘画时才可画
        if(self.isDraw){
            var x = event.clientX - self.penal.offsetLeft;  //移动过程中的x坐标
            var y = event.clientY - self.penal.offsetTop;   //移动过程中的y坐标

            if(self.type == 'pen'){
                self.pen.lineTo(x,y);
                self.pen.stroke();
            }
        }
    },false);

接下来实现橡皮擦功能，实现方法是把绘画线条加粗，并颜色默认选择画布底色

    if(self.type == 'robber'){
         self.pen.strokeStyle = '#ccc';
         self.pen.clearRect(x-10,y-10,20,20);
    }

接下来实现绘制直线，矩形和圆形的方法其实大同小异,然后为了能让我们画矩形和圆形能在所有方向都能画，我们增加了newOriginX和newOriginY两个变量

    var newOriginX  = originX,newOriginY = originY;

    if(self.type == 'line'){
        self.pen.moveTo(originX,originY);
        self.pen.lineTo(x,y);
        self.pen.stroke();

    }else if(self.type == 'rect'){
        if(x < originX){
            newOriginX = x;
        }
        if(y < originY){
            newOriginY = y;
        }
        self.pen.rect(newOriginX,newOriginY,Math.abs(x-originX),Math.abs(y-originY));
        self.pen.stroke();
    }else if(self.type == 'arc'){
        if(x < originX){
            newOriginX = x;
        }
        if(y < originY){
            newOriginY = y;
        }
        var r = Math.sqrt(Math.abs(x-originX) * Math.abs(x-originX) + Math.abs(y-originY) * Math.abs(y-originY))
        self.pen.arc(Math.abs(x-originX)+newOriginX, Math.abs(y-originY)+newOriginY , r, 0, 2*Math.PI);
        self.pen.fillStyle = self.color.value;
        self.pen.fill();
    }

question:此时我们发现画的直线，矩形和圆形都会在画的时候留下移动的痕迹，这不是我们希望的结果，所以解决方法是： 
在mousedown时，把当前画布内容保存为图片，并用初始化时一直没有使用过的this.img来保存，然后每次画直线等的时候先把画布全部清空，然后在把this.img画到画布上 
把原来的mousedown事件添加一句代码

    this.penal.addEventListener('mousedown',function(event){
        self.isDraw = true;

        //增加一句代码
        self.img.src = self.penal.toDataURL('image/png');

        originX = event.clientX - self.penal.offsetLeft;    //原点x坐标
        originY = event.clientY - self.penal.offsetTop;     //原点y坐标
        self.pen.moveTo(originX, originY);
        self.pen.strokeStyle = self.color.value;
        self.pen.lineWidth = self.lineWidth.value;
        self.pen.beginPath();

    },false);

把mouseover事件的代码稍作更改

    if(self.type == 'line'){

        self.pen.clearRect(0,0,800,800);//增加代码
        self.pen.drawImage(self.img, 0, 0);//增加代码
        self.pen.beginPath();//增加代码

        self.pen.moveTo(originX,originY);
        self.pen.lineTo(x,y);
        self.pen.stroke();

        self.pen.closePath();//增加代码
    }else if(self.type == 'rect'){
        self.pen.clearRect(0,0,800,800);//增加代码
        self.pen.drawImage(self.img, 0, 0);//增加代码
        self.pen.beginPath();//增加代码

        if(x < originX){
            newOriginX = x;
        }
        if(y < originY){
            newOriginY = y;
        }
        self.pen.rect(newOriginX,newOriginY,Math.abs(x-originX),Math.abs(y-originY));
        self.pen.stroke();

        self.pen.closePath();//增加代码
    }else if(self.type == 'arc'){
        self.pen.clearRect(0,0,800,800);//增加代码
        self.pen.drawImage(self.img, 0, 0);//增加代码
        self.pen.beginPath();//增加代码

        if(x < originX){
            newOriginX = x;
        }
        if(y < originY){
            newOriginY = y;
        }
        var r = Math.sqrt(Math.abs(x-originX) * Math.abs(x-originX) + Math.abs(y-originY) * Math.abs(y-originY))
        self.pen.arc(Math.abs(x-originX)+newOriginX, Math.abs(y-originY)+newOriginY , r, 0, 2*Math.PI);
        self.pen.fillStyle = self.color.value;
        self.pen.fill();
        self.pen.closePath();//增加代码
    }

Step3:加载js文件

    <script src="draw.js"></script>
    <script>
        window.onload = function (){
            var draw = new Draw();
            draw.init();
        };
    </script>

最后简单的画板功能就是实现了，如有不足之处请指出 
demo地址:https://github.com/1364137942/canvas-draw-panel


转自: https://blog.csdn.net/ali1995/article/details/52734253



evan_qb
关注
专栏目录
canvas实现画板功能
ali1995的博客
10-04 6985
canvas实现画板功能canvas实现画板功能 Setp1构建网页基本样式 Step2构造实现画板各个功能的js代码 Step3加载js文件 需求分析 1.具有基本的铅笔功能 2.即时直线绘制 3.即时绘制矩形 4.即时圆形 5.即时橡皮擦 7.插入图片 8.把画板保存为图片并下载 //此处还没做好，画板底色是黑色的 9.选择颜色 10.
基于echarts+js+fexible.js实现的数据可视化适配案例（附源代码）
m0_53619602的博客
07-25 1292
数据可视化 ：借助于图形化手段，清晰有效地传达与沟通信息ECharts：是一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。数据可视化场景：ECharts使用五部曲：步骤一：下载并引用echarts.js文件:https://echarts.apache.org/zh/index.html 步骤二：准备一个具备大小的DOM容器 步骤三：初始化echarts实例
js画布写字描字
weixin_33744141的博客
12-13 303
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
JavaScript青少年简明教程：canvas（画布）元素入门
最新发布
cnds123的专栏
08-07 875
JavaScript青少年简明教程：canvas（画布）元素
canvas制作简易画板
wanan1215的博客
04-14 109
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title&...
canvas制作画板
weixin_44954172的博客
06-15 984
canvas画板的制作 今天想给大家分享下canvas教程，有制作画板的源代码，html,css,javascript，图片素材在下面，快去体验下！！！喜欢伙伴记得关注哦，想要其他源代码记得在评论说下！！ 绘图之后:可以在画板上写字 画画 这是效果图 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <...
canvas创建画板
qq_50951790的博客
11-08 347
canvas创建画板
HTML5 Canvas在线写字书法练习代码
06-11
8. **JavaScript库的使用**：虽然示例未明确指出，但实际的书法练习可能使用了某些JavaScript库来简化代码或增强功能，如动画效果、手势识别等。 9. **文件组织**：项目包含`index.html`作为主页面，`js`目录可能...
javascript+Canvas实现画板功能
10-15
在介绍如何使用JavaScript和Canvas实现画板功能前，我们首先要了解画板功能的基本概念。画板功能通常指一个应用程序中的界面，允许用户通过鼠标或触摸屏进行绘画、写字或进行其他形式的绘图操作。在Web环境中，最常...
HTML5数字100流体写字特效.rar
10-02
在这个特效中，我们可能会看到`<canvas>`元素的使用，这是一个可以进行动态图形绘制的区域，类似于画布，通过JavaScript来控制它的内容。 JavaScript是实现这个特效的关键，特别是与HTML5 API的结合。在HTML5中，`...
HTML5 canvas写字板涂鸦画板特效代码
03-20
它就像一块画布，开发者可以通过JavaScript的绘图命令，如`fillRect`, `strokeRect`, `arc`, `beginPath`, `moveTo`, `lineTo`等，来在画布上绘制图像、文本、形状等。 2. **jQuery集成**：项目中使用的jQuery库...
canvas实现的画板
05-18
用html5的canvas实现的一个简易的画板，可以画直线、矩形、圆形，可以选择线条粗细和线条颜色’
canvas画板
04-17
这是一个利用H5中canvas制作的一个画板，包括铅笔，橡皮，各种几何图形等多种功能。
js制作2D画布空中飞行的鸟动画.zip
07-04
js制作2D画布空中飞行的乌鸦动画，可以自己调整飞行的高度和速度。
canvas实现画板
weixin_47207556的博客
08-28 418
Canvas API提供了一个js和html元素来绘制图形。 案例中涉及的canvas的方法主要有 canvasEl.getContext()：获取元素的内容 canvas提供了三种方法绘制矩形： fillRect(x,yxwidth,height) 方法说明：用来绘制填充的矩形 填充颜色使用fillstyle属性指定 参数说明： x：矩形起点的x轴坐标 y：矩形起点的y轴坐标 width：矩形的宽 height：矩形的高 strokeRect(x,y,width,height) 方法说明：用来绘制
用canvas实现一个简单的画板
weixin_42117093的博客
02-12 506
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
一个canvas实现的画板
空谷足音的博客
06-06 507
1.实现效果 2.上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>一个canvas实现的画板</title> <style media="screen"> ...
canvas 画板
qq_45457760的博客
04-03 266
用canvas画布制作画板，包括修改线条颜色，画布颜色，线条粗细，清除画布等功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
使用JavaScript和Canvas实现写字动画效果
2. JavaScript的使用：JavaScript是用于实现动画效果的主要语言，本文使用JavaScript来实现写字动画效果。 3. HTML、CSS和JavaScript的结合：本文展示了如何使用HTML、CSS和JavaScript结合来实现写字动画效果。 4. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值