上次介绍了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事件与手势解锁这个应用结合起来讲一下。