【题目】【8天】canvas画板

最新推荐文章于 2022-03-12 11:40:52 发布
最新推荐文章于 2022-03-12 11:40:52 发布
阅读量107 收藏
点赞数
原文链接：https://segmentfault.com/a/1190000014829657
版权

canvas画板，比较简易，目前还有很多bug
1、手机端上下会晃动
2、下载按钮微信上没法用
3、下载后背景色是透明
4、切换成橡皮擦后，需要先点铅笔才能绘画，不能直接点颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        ul,ol{list-style:none;}
        *{margin: 0;padding: 0;}
        body{overflow: hidden;}
        .icon {
            width: 1em; height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        .canvas{
            background: white;
            display: block;
            position:fixed;
            top:0;
            left:0;
        }
        #actions{
            position: fixed;
            top: 0;
            left:5px;
        }
        #actions  svg{
            width: 1.5em;
            height: 2em;
            transition: all 0.3s;
            margin: 10px;
        }
       #actions .action{
            fill:red;
            transform: scale(1.2);
       }
       .colors{
           position: fixed;
           top:41px;
           left:12px;
       }
       .color{
           transform: scale(1.2);
       }
        .colors > li{
            width:20px;
            height:20px;
            margin:10px 0;
            border-radius: 50%;
        }
        .colors > li.black{
            background: black;
        }
        .colors > li.red{
            background: red;
        }
        .colors > li.green{
            background: green;
        }
        .colors > li.blue{
            background: blue;
        }
    </style>
</head>
<body>
        <canvas id="xxx" class="canvas"></canvas>
        <div id="actions">
            <svg id="pen" class="icon action" aria-hidden="true">
                <use xlink:href="#icon-pen"></use>
            </svg>
            <svg id="eraser" class="icon" aria-hidden="true">
                <use xlink:href="#icon-eraser"></use>
            </svg>
            <svg id="clear" class="icon" aria-hidden="true">
                <use xlink:href="#icon-custom-clear"></use>
            </svg>
            <svg id="download" class="icon" aria-hidden="true">
                <use xlink:href="#icon-download1"></use>
            </svg>
            <!--<button id="eraser">橡皮擦</button>-->
            <!--<button id="brush">画笔</button>-->
        </div>
        <ol class="colors">
            <li id="black" class="black color"></li>
            <li id="red" class="red"></li>
            <li id="green" class="green"></li>
            <li id="blue" class="blue"></li>
        </ol>
        <!--<div id="canvas"></div>-->
        <script src="//at.alicdn.com/t/font_663139_nbdaue5y67gmn29.js"></script>
        <script src="js/canvas3.js"></script>
</body>
</html>

JS代码

<script>
    var yyy = document.getElementById('xxx');
    var ctx = yyy.getContext("2d");
    
    autoCanvasSize(yyy);
    
    listenToUser(yyy);
    
    //是否使用橡皮擦
    var eraserEnable = false;
    
    eraser.onclick = function () {
        eraserEnable = true;
        eraser.classList.add('action');
        pen.classList.remove('action');
    };
    pen.onclick = function () {
        eraserEnable = false;
        pen.classList.add('action');
        eraser.classList.remove('action');
    };
    
    red.onclick = function () {
        ctx.fillStyle = "red";
        ctx.strokeStyle = "red";
        red.classList.add('color');
        green.classList.remove('color');
        blue.classList.remove('color');
        black.classList.remove('color');
    };
    green.onclick = function () {
        ctx.fillStyle = "green";
        ctx.strokeStyle = "green";
        green.classList.add('color');
        red.classList.remove('color');
        blue.classList.remove('color');
        black.classList.remove('color');
    };
    blue.onclick = function () {
        ctx.fillStyle = "blue";
        ctx.strokeStyle = "blue";
        blue.classList.add('color');
        red.classList.remove('color');
        green.classList.remove('color');
        black.classList.remove('color');
    };
    black.onclick = function () {
        ctx.fillStyle = "black";
        ctx.strokeStyle = "black";
        black.classList.add('color');
        red.classList.remove('color');
        blue.classList.remove('color');
        green.classList.remove('color');
    };
    clear.onclick = function () {
        ctx.clearRect(0,0,yyy.width,yyy.height);
    };
    download.onclick = function () {
        var url = yyy.toDataURL("image/png");
        var a = document.createElement('a');
        document.body.appendChild(a);
        a.href = url;
        a.download = "我的画";
        a.target = "_blank";
        a.click();
    };
    
    //设置画板
    function autoCanvasSize(canvas) {
        function setCanvasSize(){
            var pageWidth = document.documentElement.clientWidth;   // 获取屏幕宽度
            var pageHeight = document.documentElement.clientHeight;     //获取屏幕高度
    
            canvas.width = pageWidth;       //画板宽等于屏幕宽度
            canvas.height = pageHeight;     //画板高等于屏幕高度
        }
    
        setCanvasSize();
    
        window.onresize = function ( ){ //改变窗口大小
            setCanvasSize();
        };
    }
    
    //监听用户鼠标事件
    function listenToUser(canvas) {
        var painting = false;
        var lastPoint = {};
    
        if(document.body.ontouchstart !== undefined){
            canvas.ontouchstart = function (aaa) {
                console.log(aaa);
                var x = aaa.touches[0].clientX;     //console.log打印出aaa，找到里面的touches（多点触控），第一个用touches[0]
                var y = aaa.touches[0].clientY;
                painting = true;
                if(eraserEnable){
                    ctx.clearRect(x-5,y-5,10,10);
                }else{
                    lastPoint = {"x":x,"y":y};      //在每次动的时候把当前点和动的点连成一条线
                    drawCircle(x,y,4);
                }
            };
            canvas.ontouchmove = function (aaa) {
                var x = aaa.touches[0].clientX;
                var y = aaa.touches[0].clientY;
                var newPoint = {x:x,y:y};
                if(!painting){return;}
                if(eraserEnable){
                    ctx.clearRect(x-5,y-5,10,10);
                }else{
                    drawCircle(x,y,4);
                    drawLine(lastPoint.x,lastPoint.y,newPoint.x,newPoint.y,10);
                    lastPoint = newPoint;           //实时更新上一个点的坐标，不然都和第一个点连接了
                }
            };
    
            canvas.ontouchend = function () {
                painting = false;
            }
        }else{
            //鼠标按下
            canvas.onmousedown = function (aaa) {
                var x = aaa.clientX;
                var y = aaa.clientY;
                painting = true;
                if(eraserEnable){
                    ctx.clearRect(x-5,y-5,10,10);
                }else{
                    lastPoint = {"x":x,"y":y};      //在每次动的时候把当前点和动的点连成一条线
                    drawCircle(x,y,4);
                }
            };
    
            //鼠标移动
            canvas.onmousemove = function (aaa) {
                var x = aaa.clientX;
                var y = aaa.clientY;
                var newPoint = {x:x,y:y};
                if(!painting){return;}
                if(eraserEnable){
                    ctx.clearRect(x-5,y-5,10,10);
                }else{
                    drawCircle(x,y,4);
                    drawLine(lastPoint.x,lastPoint.y,newPoint.x,newPoint.y,10);
                    lastPoint = newPoint;           //实时更新上一个点的坐标，不然都和第一个点连接了
                }
            };
    
            //松开鼠标
            canvas.onmouseup = function () {
                painting = false;
            };
        }
    }
    
    //画圆
    function drawCircle(x,y,radius){
        ctx.beginPath();
        ctx.arc(x,y,radius,0,Math.PI*2);
        ctx.fill()
    }

    //连线
    function drawLine(x1,y1,x2,y2,lineWidth){
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        ctx.lineWidth = lineWidth;
        ctx.lineTo(x2,y2);
        ctx.stroke();
        ctx.closePath();
    }

</script>

总结：
1、按下鼠标和移动鼠标后它们中间会有空隙，解决方法：用线连接鼠标移动前后的两点。lasePoint和newPoint
2、painting = false监听用户是否在绘画。true再绘画false不在绘画。
3、eraserEnable = false;监测用户是在使用橡皮檫，true是在使用橡皮擦，停止使用铅笔。
4、判断用户是使用pc还是手机，需要监测是否有touch事件，如果有，首先使用touch事件；在pc端document.body.ontouchstart === undefined，在移动端是null，只要不等于undefined就可以确定是移动端。
5、状态切换，不直接修改css里面内容，通过js切换class来实现状态切换。比如：上面橡皮擦和铅笔的切换。
6、使用x.className = 'active'，class会变为active；使用x.classList.add('active')，class后面会增加一个属性值active。
7、document.documentElement.clientWidth的作用是获取document宽度（也就是viewport宽度）
8、移动端支持多点触控，所以要获取clientX需要加上touches[0]，表示touch第一个值

weixin_34392906
关注
经典面试题（讨论canvas与svg的区别）
helloword_chen的博客
11-11 2万+
讨论关于canvas和svg的区别。首先canvas是html5提供的新元素，而svg存在的历史要比canvas久远，已经有十几年了。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。在H5中看似canvas与svg很像，但是，他们有巨大的差别。   首先，从它们的功能上来讲，canvas可以看做是一个画布。，其绘制出来的图形为
在小程序中使用canvas
MytLoy的博客
03-14 938
一直没有怎么使用过canvas，小程序也是之前看过一个视频而已，想要找个例子结合一下两者。所以一个小小的保存图片作为朋友圈相册封面的demo就这么出现了，在这里主要记录一下自己遇到的一些问题以及解决的办法。截图：主要是以下几个问题：1.颜色选择器2.页面通信3.组件间通信4.canvas（生成图片、预览/保存、文字换行）1.颜色选择器从小程序的文档中没有找到相应的颜色选择组件，昨天（18.3.13...
【题目】【5天】canvas元素
weixin_33935777的博客
05-01 102
题目一：绘制雪人，传递一个Boolean值，true是填充，false是圆圈。 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var fillCricle = function(x,y,lineWidth,radius,...
canvas练习1-基础
小银
03-12 761
canvas练习1-基础资料查询动态创建一个DOM掌握 document相关的函数练习(1)绘图资源1. 画笔练习(2)2. 画刷练习(3)3. 鼠标移动事件4. 鼠标点击事件5. 鼠标双击事件综合练习 资料查询 api函数文档查询地址：https://developer.mozilla.org/en-US/ 动态创建一个DOM 掌握 document相关的函数 查询某一个DOM 修改DOM相关的属性 创建一个新的DOM 练习(1) 在指定的一个div下创建一个canvas（画布) canvas可以适应
canvas(1) -- canvas的基本属性和常见面试题
tansy_big_rabbit的博客
03-04 4904
<canvas> 标签只是图形容器，必须使用脚本来绘制图形。 1. 创建一个画布 <canvas id="canvas01" width="300" height="400"></canvas> //这里width和height的单位都是px 2. 开始绘制图像 let canvas = document.getElementById("canvas...
小程序canvan画布，图片和文字结合，并保存到本地
鸡汤、好腻
08-03 6295
业务场景：商品的分享，需要logo，商品图，价格，小程序二维码整合到一张图上分享到朋友圈。应用canvas把他们绘制到一张图上保存到本地相册然后分享 wxml部分： &lt;canvas canvas-id="myCanvas" style="width:300px;height:400px;border: 1px solid;margin:30rpx auto"/&gt; &lt;view...
微信小程序 Canvas 画板、签名板Demo
10-12
总结来说，"微信小程序 Canvas 画板、签名板Demo"是一个综合运用了微信小程序API、Canvas绘图技术和交互设计的实例，它不仅展示了如何在小程序中创建交互式的画板功能，也为我们提供了学习和参考的样本。通过深入...
vue-canvas:一个简单vue canvas画板的demo
05-10
Vue Canvas 是一个基于 Vue.js 的轻量级画板组件，旨在提供一个简易的画布功能，用户可以在网页上进行自由绘图。这个项目是开发者为了展示如何在 Vue 框架中集成 HTML5 Canvas 元素而创建的一个示例。在 Vue 应用中...
canvas画板实例
07-05
本实例是关于如何利用JS和Canvas API创建一个功能丰富的在线画板应用。 首先，Canvas是一个HTML5的标签，它提供了一个2D渲染上下文，允许我们直接在网页上绘制图像。在这个"canvas画板实例"中，我们可以通过...
canvas画板
04-17
本项目聚焦于使用`canvas`创建一个功能丰富的在线画板，具备铅笔绘图、橡皮擦、以及绘制几何图形等多种功能。 首先，`canvas`元素是通过JavaScript进行操作的，它提供了一套API，允许开发者在画布上绘制点、线、...
自定义控件二： Paint Canvar 画几何图形
05-13
自定义控件二： Paint Canvar 画几何图形。
微信小程序canvas画图
热门推荐
impossible1994727的博客
07-16 2万+
基础写起来太没动力了，也写得乱七八糟的，还是直接解决一些小问题比较方便，代码的方方面面的细节都会详尽的解释一下。 1、下面介绍一下canvas的画图，我这个简单一点，画一个带图文的背景图，图片可以从后台获取也可以选择本地的。canvas画图首先要在wxml里面新建一个<canvas>标签，一定要写上canvas-id='canvas的id'，这是必须条件，如下面代码： <...
使用Canvas实现动画效果 | DKlogs -- 设计 | 生活
weixin_33895016的博客
05-19 76
使用Canvas实现动画效果 | DKlogs -- 设计 | 生活使用Canvas实现动画效果
基于canvas实现的高性能、跨平台的股票图表库--clchart
weixin_34150503的博客
04-25 505
什么是 ClChart？ ClChart是一个基于canvas创建的简单、高性能和跨平台的股票数据可视化开源项目。支持PC、webApp以及React Native和Weex等平台。在React Native和Weex上完全适配开源项目GCanvas，可轻松使用GCanvas来使得您开发的应用在android和ios上具有原生绘图的能力。 为什么需要ClChart 在现有的开源库中，不乏有非常不错...
小程序：画布canvas和媒体类组件实例总结
tomorrownan的博客
06-06 1256
小程序的绘图组件与html5里的canvas是类似的，而媒体类组件常用的有音频audio、相机camera、视频video等。下面就用例子说明每一个具体组件的用法和常用属性用法解析。 1.画布canvas canvas可以用来绘制图形和动画，图形和动画的具体实现要借助API wx.createCanvasContext， wx.createCanvasContext返回一个canvas对象，它有很...
canvas实现简单代码雨
Yuoliku的博客
06-24 2171
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compa...
如何让Canvas画笔填充满整个浏览器屏幕
laijieyao的专栏
12-10 8258
HTML5中用Canvas画全屏
小程序利用Canvas绘制图片和竖排文字
weixin_34124939的博客
05-14 567
引言 闲暇时间抽个空写了个三国杀武将手册的小程序，中间有个需求设计的是合成武将皮肤图、竖排的武将姓名、以及小程序码，然后提供保存图片到相册，最终让用户可以分享到朋友圈或其他平台。合成图片应该按照Canvas的文档来做都没什么问题，主要是有个竖排文字的需求，这里和大家分享一下。 # 广告 宣传一下自己的小程序，有喜欢三国杀的可以关注一下，有什么问题也可以加我微信一起讨论。 扫码体验小程序 扫码...
用wxDraw.js制作酷炫的小程序canvas动画『wxDraw 小程序界的zrender』
weixin_34168700的博客
10-31 295
wxDraw 轻量的小程序canvas动画库 github 文档 是什么 canvas 是HTML5的一个重要元素，它能够高效的绘制图形，但是过于底层，且粗糙的Api，导致开发者很难使用它来做较为复杂的图形， 而且它的即时绘制无记忆特性，使得它内部的图形并不支持动画更不支持一切交互事件。 这样的问题出现在所有支持canvas的客户端上同样出现在 微信小程序中的canvas中， 由于小程序由j...
canvas 画板安卓
最新发布
05-27
Canvas 画板是一款可以在安卓设备上进行绘画和涂鸦的应用程序。它提供了丰富的画笔工具，包括不同颜色、线条粗细、笔刷样式等，让用户可以轻松地实现自己的绘画创意。除此之外，Canvas 画板还支持多种绘制方式，包括...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值