02Canvas 画板

最新推荐文章于 2024-05-08 16:38:56 发布

转载最新推荐文章于 2024-05-08 16:38:56 发布 · 78 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ericasun/p/9496771.html

本文介绍了一个简单的手绘应用开发过程，包括使用canvas实现画板功能，支持画笔颜色及粗细调整，以及如何保存和清空画板。文章详细解释了通过监听鼠标和触屏事件来实现绘制的基本原理。

1.功能描述

实现画画功能，并可切换画笔颜色、细条粗细。可保存、清空画板。

2.思路

创建画板——》监听鼠标（触屏）事件——》绘制路线

3.具体操作

3.1 创建画板

通过canvas创建画板

<canvas id="xxx" width=300 height=300></canvas>

3.2 监听鼠标（触屏）事件

监听鼠标（触屏）事件，当鼠标按下（触屏）时进行绘画，根据鼠标（手指）移动路线绘制，松开鼠标（手指离屏）时停止绘画。

canvas.ontouchstart = function(aaa){
    var x = aaa.touches[0].clientX;
    var y = aaa.touches[0].clientY;

    using = true;

    if(isEraser){
        context.clearRect(x-5,y-5,10,10);
    } else{
        lastpoint = {"x":x,"y":y};
    }
}

canvas.ontouchmove = function(aaa){
    var x = aaa.touches[0].clientX;
    var y = aaa.touches[0].clientY;

    if(using == false){return;}

    if(isEraser){
        context.clearRect(x-5,y-5,10,10);
    } else{
        var newPoint = {"x":x,"y":y}

        //drawCircle(x,y);
         drawLine(lastPoint.x,lastPoint.y,newPoint.x,newPoint.y);
         lastPoint = newPoint;
    }
}

canvas.ontouchend = function(){
    using = false;
    lastPoint =  {"x":undefined,"y":undefined};
}

3.3 绘制路线

通过点与线的连接，实现绘画功能。

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

4.相关知识点

4.1 js

监听鼠标点击事件

按下去鼠标 document.onmousedown =function(x){console.log(x)}

移动鼠标 document.onmousemove = function(y){console.log(y)}

松开鼠标 document.onmouseup = function(z){console.log(1)}

监听触摸事件（因为手机上没有mouse所以用touch）

开始触摸 canvas.ontouchstart = function(aaa){}

结束触摸 canvas.ontouchend = function(aaa){}

边摸边动 canvas.ontouchmove = function(aaa){}

通过特性检测得知是用mouse还是touch

方法1

如果设备支持 ontouchstart，结果是null

如果设备不支持ontouchstart，结果是undefined
方法2

移动端 ‘ontouchstarts’ in document.body——》true

手机端 ‘ontouchstarts’ in document.body——》false

特性检测 document.body.ontouchstart

触屏设备 canvas.ontouchstart

非触屏设备 canvas.onmousedown

touch时把当前所有touch事件都存到了touches中，所以从touches[0]中获取坐标

用div画画

首先获取鼠标在视图上的x、y，然后生成1个div，并设置div的样式，最后将div放到画板（div）中。即可打点。

缺点：元素画画只能画点，没办法连线。

用canvas画画

矩形

获取画板                  var yyy =document.getElementById(‘xxx’);

获取2d上下文 var context =yyy.getContext(“2d”);

填充样式                  context.fillStyle = ‘red’;

填充、描边矩形       context.fillRect(0,0,100,100);

描边样式                  context.strokeStyle= ‘yellow’;

描述矩形                  context.strokeRect(10,0,100,100);

清除                         context.clearRect(50,50,60,60);
画线

开始 context.beginPath();

起点                       context.moveTo(80,80);

画线                       context.lineTo(100,80);

结束                       context.fill();
画圆

开始 context.beginPath()

画圆 context.arc(150,150,半径,开始角度,结束角度)

结束 context.fill()
点与线连起来

出现第1个点第2个点的时候之间连个线，即mouseDown的时候为第1个点，mouseMove的时候为第2个点。并每次记录上1个点。

获取页面宽高

document.documentElement.clientWidth

document.documentElement.clientHeight

一个按钮只做一件事

让页面缩放

content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>

in操作符

varhash = {a:1,b:2,c:3}

‘a’in hash——》true

‘d’in hash——》false

禁止滚动条 overflow:hidden

在移动端让canvas不移动 绝对定位 position:fixed; top:0; left:0;

5.实际成果

转载于:https://www.cnblogs.com/ericasun/p/9496771.html