Canvas画板---手机上也可以用的画板

oogh 发布于2019-08-22 13:51 / 3738人阅读

摘要：方法可以获取到上下文二制作画板画板功能可以绘制不同颜色和粗细的线条，画板上有橡皮擦功能，一键清除功能，下载功能。我们可以用来监听三种状态。

学习制作画板之前，我们先来了解一下canvas标签

一.canvas标签

1.canvas标签与img标签相似，但是canvas标签是一个闭合标签，并且没有src alt属性
2.canvas标签有两个属性，width，height。我们在页面上用canvas绘制一个画布时，应用width，height属性设置大小，如果用css设置，绘制图像时可能会出现扭曲。
3.渲染上下文 context
canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。
getContext()方法可以获取到上下文context.

二.制作画板

画板功能：可以绘制不同颜色和粗细的线条，画板上有橡皮擦功能，一键清除功能，下载功能。

1.首先我们需要绘制一个自适应屏幕宽度的画布。

</>复制代码 
 function wResize() {
        var pageWidth = document.documentElement.clientWidth
        var pageHeight = document.documentElement.clientHeight
        canvas.width = pageWidth
        canvas.height = pageHeight
    }

2.当用户在画板上绘画时有三种状态，鼠标点击态，鼠标移动态，鼠标离开态。

我们可以用mousedown,mousemove ,mouseup来监听三种状态。

当用户点击鼠标时：

</>复制代码 
  canvas.onmousedown = function (a) {
                var x = a.clientX;
                var y = a.clientY;
                using = true;//设置变量，标志开始使用画布
                if (eraserEnabled) {//如果标志使用橡皮擦，则清除画布内容
                    context.clearRect(x, y, 20, 20);
                }
                else {否则记录当前鼠标坐标
                    lastPoint = {x: x, y: y}
                }
            }

当用户鼠标移动时：

</>复制代码 
  canvas.onmousemove = function (a) {
                var x = a.clientX;
                var y = a.clientY;
                if (!using) {return}//判断是否使用画板
                if (eraserEnabled) {//如果标志使用橡皮擦，则清除画布内容
                    context.clearRect(x, y, 20, 20);
                }
                else{//如果没有使用橡皮擦
                    var newPoint = {"x": x, "y": y};//记录鼠标移动到的新坐标
                    drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y) //绘制线条
                    lastPoint = newPoint;//将当前坐标作为下次移动的首坐标
                }
            }

当鼠标离开时：

</>复制代码 
  canvas.onmouseup = function (a) {
                using = false;//设置变量，标志不使用画板
            }

3.绘制直线

</>复制代码 
function drawLine(x1, y1, x2, y2) {
    context.beginPath();//开始移动笔触，路径开始
    context.moveTo(x1, y1);//其实坐标
    context.lineWidth = lineWidth ;//默认线条粗细
    context.lineTo(x2, y2);//结束坐标
    context.stroke();
    context.closePath();//结束笔触，路径结束
}

stroke()：通过线条来绘制图形轮廓。
fill()：通过填充路径的内容区域生成实心的图形

4.画笔功能

</>复制代码 
pen.onclick = function(){
    eraserEnabled = false;//设置变量，标志不使用橡皮擦
    pen.classList.add("active");//设置画板上画笔按钮的样式变化
    eraser.classList.remove("active");//设置画板上橡皮擦按钮的样式变化
}

5.橡皮擦功能

</>复制代码 
eraser.onclick = function(){
    eraserEnabled = true;//标志使用橡皮擦
    eraser.classList.add("active");//设置画板上橡皮擦按钮的样式变化
    pen.classList.remove("active");//设置画板上画笔按钮的样式变化
}

6.一键清除功能

</>复制代码 
clear.onclick = function(){
    context.clearRect(0,0,canvas.width,canvas.height);
}

这里使用了clearRect(x, y, width, height)方法，清除指定矩形区域，让清除部分完全透明。x,y坐标为其实坐标，width, height为清除矩形区域的大小。

7.一键下载功能

</>复制代码 
download.onclick = function(){
    var url = canvas.toDataURL("image/png");
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.href = url;
    a.download = "context";
    a.click();
}

canvas.toDataURL("image/png");该方法返回一个png格式的图片展示的url，当用户点击画板上的下载按钮，在html中插入一个a标签，a.download指向画布的上下文,download 属性规定被下载的超链接目标。

三.手机适配的画板 1.添加meta标签:

因为浏览器初始会将页面现在手机端显示时进行缩放，因此我们可以在meta标签中设置meta viewport属性，告诉浏览器不将页面进行缩放，页面宽度=用户设备屏幕宽度

</>复制代码

2.移动端监听鼠标事件的方法与pc端不同

当鼠标点击时用ontouchstart方法监听：

</>复制代码 
canvas.ontouchstart = function(a){
            var x = a.touches[0].clientX;
            var y =a.touches[0].clientY;
            using = true;
            if (eraserEnabled) {
                context.clearRect(x, y, 20, 20);
            }
            else {
                lastPoint = {x: x, y: y}
            }
        }

当鼠标移动是用ontouchmove方法监听：

</>复制代码 
 canvas.ontouchmove = function(a){
            var x = a.touches[0].clientX;
            var y = a.touches[0].clientY;
            if (!using) {return}
            if (eraserEnabled) {
                context.clearRect(x, y, 20, 20);
            }
            else{
                var newPoint = {"x": x, "y": y};
                drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y)
                lastPoint = newPoint;
            }
        }

当鼠标离开时用ontouchend方法监听：

</>复制代码 
 canvas.ontouchhend = function(a){
            using = false;
        }

云服务器 GPU云服务器画板尺寸绘画板画板 JS画板

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92526.html

Canvas画板---手机上也可以用的画板

摘要：方法可以获取到上下文二制作画板画板功能可以绘制不同颜色和粗细的线条，画板上有橡皮擦功能，一键清除功能，下载功能。我们可以用来监听三种状态。学习制作画板之前，我们先来了解一下canvas标签一.canvas标签 1.canvas标签与img标签相似，但是canvas标签是一个闭合标签，并且没有src alt属性2.canvas标签有两个属性，width，height。我们在页面上用c...

ernest.wang 2019-08-29 14:14 评论0 收藏0
手机端写字板、画板vue组件

摘要：一个简单的写字板画板组件由于项目需求目前只提供清空功能代码及使用引入组件使用组件，可以放在一个自定义样式的中屏兼容画布大小放大倍数，笔触颜色笔触宽度，笔触阴影大小，清空自定义清空按钮，调用组件方法清空画布开发笔记需要兼容屏一倍图模糊一个简单的canvas写字板、画板vue组件,由于项目需求目前只提供清空功能代码及demo 使用 1.引入组件 import draw from ./in...

mengera88 2019-08-26 13:27 评论0 收藏0
【题目】【8天】canvas画板

摘要：和监听用户是否在绘画。再绘画不在绘画。监测用户是在使用橡皮檫，是在使用橡皮擦，停止使用铅笔。使用，会变为使用，后面会增加一个属性值。的作用是获取宽度也就是宽度移动端支持多点触控，所以要获取需要加上，表示第一个值 canvas画板，比较简易，目前还有很多bug1、手机端上下会晃动2、下载按钮微信上没法用3、下载后背景色是透明4、切换成橡皮擦后，需要先点铅笔才能绘画，不能直接点颜色 ...

Xufc 2019-08-22 17:09 评论0 收藏0
【web前端】花瓣画板分类归档查看工具

摘要：花瓣是国内最大的图片分享网站，部分用户长期以来都有对个人主页的画板按字母顺序进行归档的需求，但花瓣官方一直没有支持这个能力。花瓣是国内最大的图片分享网站，部分用户长期以来都有对个人主页的画板按字母顺序进行归档的需求，但花瓣官方一直没有支持这个能力。最近写了个油猴脚本用于按字母顺序归档主页画板。仅供学习交流。效果演示 showImg(https://segmentfault.co...

mochixuan 2019-08-23 13:49 评论0 收藏0
使用Canvas和JavaScript做一个画板

摘要：本文同步于个人博客前些天学习了的元素，今天就来实践一下，用做一个画板。实现一个简单的画板实现思路监听鼠标事件，用方法把记录的数据画出来。为时，移动鼠标使用剪裁擦除画布。本文同步于个人博客：https://zhoushuo.me/blog/2018/03/11/drawing-borad/ 前些天学习了HTML5的元素，今天就来实践一下，用canvas做一个画板。 showImg(ht...

asce1885 2019-08-22 15:25 评论0 收藏0