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

上次介绍了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);

canvas功能还是很强大的,JS功能也很强大的!

下一篇我会把JS事件与手势解锁这个应用结合起来讲一下。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值