【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实现的画板
05-18
用html5的canvas实现的一个简易的画板，可以画直线、矩形、圆形，可以选择线条粗细和线条颜色’
canvas实现画板功能
ali1995的博客
10-04 7001
canvas实现画板功能canvas实现画板功能 Setp1构建网页基本样式 Step2构造实现画板各个功能的js代码 Step3加载js文件 需求分析 1.具有基本的铅笔功能 2.即时直线绘制 3.即时绘制矩形 4.即时圆形 5.即时橡皮擦 7.插入图片 8.把画板保存为图片并下载 //此处还没做好，画板底色是黑色的 9.选择颜色 10.
JavaScript青少年简明教程：canvas（画布）元素入门
cnds123的专栏
08-07 1063
JavaScript青少年简明教程：canvas（画布）元素
JavaScript 之 canvas（四）-- 绘制文字
热门推荐
一只小鹰
10-03 2万+
本文原文地址：https://www.jeremyjone.com/485/， 转载请注明，谢谢。 基本概念 在canvas中，为我们提供了一个非常方便的添加文字的方法，直接上 w3school 的文档说明： context.fillText(text,x,y,maxWidth); // text: 规定在画布上输出的文本。 // x: 开始绘制文本的 x 坐标位置（相对于画布）。 // y:...
css之canvas、 并使用canvas 实现写字效果。
qq_51985469的博客
07-31 444
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
python怎么在画布上写字_Python3 tkinter基础 Canvas create_text 在画布上添加文字
weixin_39832643的博客
11-29 3635
Python : 3.7.0OS : Ubuntu 18.04.1 LTSIDE : PyCharm 2018.2.4Conda : 4.5.11typesetting : Markdowncode"""@Author : 行初心@Date : 18-9-30@Blog : www.cnblogs.com/xingchuxin@Gitee : gitee.com/zhichengjiu...
js canvas实现写字动画效果
10-17
该文档中提到的“js canvas实现写字动画效果”主要涉及以下几个方面： 1. **HTML页面结构**：创建一个`<canvas>`元素用于绘制图形，并设置了控制器区域，包括各种颜色按钮、清除按钮等。这些元素通过HTML进行布局。...
基于JavaScript的写字楼商铺租赁管理开源系统设计源码
最新发布
09-25
该项目是一款基于JavaScript的写字楼商铺租赁管理开源系统设计源码，包含113个文件，涵盖65个JavaScript文件、16个JPG图片、9个CSS样式文件、5个JSON数据文件、4个DOCX文档、3个Markdown文件、3个Jade模板文件、2个...
原生JS+HTML5实现的可调节写字板功能示例
10-18
在现代网页开发中，实现一个可调节的写字板功能是常见的需求，而利用原生JavaScript（JS）和HTML5技术可以轻松实现。以下将详细介绍如何使用原生JS结合HTML5的Canvas元素来创建一个具有可调节大小、颜色选择和清空...
JS+HTML5 Canvas实现简单的写字板功能示例
10-18
在本篇文章中，主要介绍了使用JavaScript (JS) 和HTML5的Canvas元素来实现一个简单的写字板功能。这个写字板功能允许用户在网页上自由地绘制图形。通过实例演示，文章详细分析了JavaScript与HTML5 Canvas特性结合...
js convas 写字demo
03-16
基于js +jq+canvas写的手写文字demo 基于js +jq+canvas写的手写文字demo 基于js +jq+canvas写的手写文字demo 基于js +jq+canvas写的手写文字demo 基于js +jq+canvas写的手写文字demo 基于js +jq+canvas写的手写...
canvas实现一个简易画板
notagoodwriter的博客
11-08 960
canvas实现基础画板
用canvas实现在线画板,带你找回童年乐趣
qq_63204040的博客
07-13 931
canvas制作在线画板
使用Canvas制作画板
weixin_60895836的博客
07-31 575
UNDO: 'z',REDO: 'b'这部分代码定义了画板应用的状态和常量。state对象用于跟踪用户的操作和绘制数据。DATA_FIELD和DATA_TYPE用于标识绘制数据的不同部分。定义了画布的一些默认值，包括默认颜色、线条样式和线条宽度。KEYBOARD定义了用于撤销和重做的键盘按键。
150行代码实现一个极简的Canvas多功能画板
~~~
11-01 3143
HTML5提供的Canvas标签能实现很多有趣的效果，本文就来分享一下如何使用Canvas来实现一个极简的多功能画板。主要功能包括：画笔、橡皮擦、清屏、前进和后退。
js画布写字描字
weixin_33744141的博客
12-13 316
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
canvas实现简易画板
想好了再写！
06-26 436
/ 获取鼠标在画布内的坐标。// 获取鼠标在画布内的坐标。2、保存签名实现下载功能。
javaScript 利用canvas实现简单画板
qq_27009579的博客
05-10 1041
本文主要实现画板基本功能和介绍canvas的具体的使用<1> 实现鼠标绘制功能首先是HTML代码： 直接在body中添加canvas标签 <canvas id="mycanvas"></canvas>js代码：$(function() { var mycanvas = document.getElementById("mycanvas"); var ctx = mycanvas.g
基于canvas的自定义画板软件
豆包程序员
05-23 364
HTML5其中一个最具代表性的新特性就是canvas，通过canvas可以对2D或位图进行东涛、脚本的渲染，它能帮助用户画出很多有趣并且精美的作品，其中有很多类似Windows画板的功能，包括铅笔、画直线、圆、矩形、插入文字等功能。和以前的版本不同是，HTML5带来了很多的新特性，包括饰品、音频、图像、动画很多都被标准化，随着互联网的进步，HTML5的技术也越来越被人们接受和认可。橡皮檫：去除作品不需要的东西，通过橡皮擦，就能够进行相关的功能操作，擦除画板的图像。颜色工具：点击选择不同的颜色进行绘画。
使用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、付费专栏及课程。

余额充值