利用JS 事件与 Cnavas绘图以及 H5 缓存写的一个手势解锁（二）

最新推荐文章于 2024-08-02 10:52:28 发布

铛铛铛铛Huan

最新推荐文章于 2024-08-02 10:52:28 发布

阅读量631

点赞数

分类专栏： JavaScript 文章标签： javascript canvas

本文链接：https://blog.csdn.net/u010046318/article/details/72638353

版权

JavaScript 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

上次介绍了JS的事件机制，不知道大家是否对事件都有了基本的运用和掌握。当然，这也只是我个人的一些理解。

下面是我总结的一些canvas 原理并且结合手势解锁这个目的，我们能够怎么实现。

canvas是H5提供的一个新元素，这个元素的功能真的很强大，一个元素结合JS就可以想绘制什么样的图形就能够出现什么样的图形，是不是也很期待怎样用canvas来实现呢？

关于canvas元素本身，我想强调是：canvas 使用时必须设置width 和height属性值。
另一方面，如果想要与JS结合，必须先在canvas上获取它的2D上下文，因为canvas毕竟只是一个画布，就相当于绘制的一块区域。获取到2D 上下文之后，就可以调其中的很多API。

<body>
    <canvas id="canvas" height="500" width="500">这里可以加文字描述，在浏览器不支持canvas时会显示出来</canvas> 
</body>
<script>
    var c = document.getElementById('canvas');
    var ctx = c.getContext("2d");
    //后续就可以利用ctx中的一些方法
</script>

这些API我想从简单到复杂来介绍。

1.最简单的就是填充和描边

ctx.fillStyle = "blue";   //设置填充颜色
ctx.strokeStyle = "yellow"; //设置描边颜色

2.利用api 可以直接画出图形的只有一个，就是矩形.
fillRect(x, y, height, width)
表示从(x,y)点开始绘制矩形，高为height,宽为width

ctx.fillStyle = "blue";   //设置填充颜色
ctx.strokeStyle = "yellow"; //设置描边颜色
ctx.fillRect(0, 0, 20, 10);  //填充一个矩形
ctx.strokeRect(30, 20, 100, 50);  //对矩形描边
ctx.clearRect(0, 0, 20, 10);   //清除矩形区域

别看只有简单的矩形，但可以组合多个矩形重叠起来构成很多有趣的图形。
3.绘制路径
关于绘制路径，首先要beginPath()，然后开始画路径，注意画路径的这个过程就相当于是我们连笔画一个图形一样，笔走到哪就会画到哪。但可以调用moveTo(x,y)来把笔移到某个固定点。如果想停止本次绘制过程，closePath()可以来实现。

下面代码实现了画两个同心圆

ctx.beginPath();
ctx.lineWidth = 1;
ctx.arc(100, 100, 37.5, 0, 2 * Math.PI, false); 
//画弧api，arc(起点x, 起点y, 半径r, startAngle, endAngle, 逆时针(true/false))

ctx.moveTo(125, 100);
ctx.arc(100, 100, 25, 0, 2 * Math.PI, false);
//ctx.stroke();

ctx.moveTo(100, 100); 
ctx.lineTo(100, 77);  //从上一点划线到当前点(x,y)
//ctx.stroke(); 

ctx.moveTo(100, 100); 
ctx.lineTo(77, 100); 
//ctx.stroke(); 

ctx.stroke();          //可以一次性把路径都绘制，然后再stroke出来;

这块的绘制路径完全可以用来画圆，因此，手势解锁的初始界面（9个相同间隔的圆）就可以利用绘制圆形来实现，只需设置每个点的坐标，圆的半径以及各个圆之间的距离就可以。
部分代码如下:

function InitPoint(){
    var startX = 200;
    var startY = 100;
    for(var i = 0; i < 3; i++)
        for(var j = 0; j < 3; j++)
        {
            var x = startX + j * 2 * r + (j + 1) * d + r;
            var y = startY + i * 2 * r + (i + 1) * d + r;
            pointArr.push({
                x : x,
                y : y,
                id : 3 * i + j,
                visited : false
            });
        }
}

function DrawCirclePanel(pointArr){
    //将数组中的点绘制出来
    ctx.fillStyle = "white";
    ctx.strokeStyle = "black";
    for(var num = 0; num < pointArr.length; num++)
    {
        ctx.beginPath();
        ctx.arc(pointArr[num].x, pointArr[num].y, r, 0, 2 * Math.PI, false);
        ctx.closePath();
        ctx.fill();
        ctx.strokeStyle = "rgba(10, 255, 25, 1)";
        ctx.stroke();
    }
}

利用canvas 实现绘制图形基本上面的就可以实现，下来介绍几个高级用法：

1.绘制图像

//绘制图像到Canvas中
var i = document.getElementsByTagName('img')[0];
//ctx.drawImage(i, 100, 200);
ctx.drawImage(i, 100, 200, 200, 100, 200, 180, 190, 180);

2.获取图像数据

var imgdata1 = ctx.getImageData(0, 0, 440, 293);
console.log(imgdata1);                 //imgdata1包含40000

var imgdata = imgdata1.data; //数组，包括r,g,b，alpha(透明度)分量
r = imgdata[0];    
g = imgdata[1];
b = imgdata[2];
a = imgdata[3];

这样可以对图像中每一个像素值进行处理，因此可以实现灰度化等等一些图像处理操作。
3. 阴影
熟悉CSS3的阴影特效的，下面代码应该很容易就懂了。

ctx.shadowColor = "black";   //阴影颜色
ctx.shadowOffsetX = 3;     //阴影横向偏移
ctx.shadowOffsetY = 1;     //阴影纵向偏移
ctx.shadowBlur = 4;        //阴影模糊范围

4.变换

var handler = function(e){
   ctx.translate(100, 100);   //将（100，100）设为原点
   ctx.moveTo(0, 0);
   ctx.lineTo(0, 25);
   ctx.moveTo(0, 0);
   ctx.lineTo(10,25);
   ctx.rotate(1);       //相对于圆点的旋转
   ctx.stroke();
}
var btn = document.getElementById('rbtn');
btn.addEventListener('click', handler);