您的位置：首页 > 其它

Context的学习

2016-06-26 21:42 218 查看

canvas对象

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

定义如下

<canvas id="canvas" width="200" height="100"></canvas>

但是canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成，我们可以将其视作为一张画布。

<script type="text/javascript">
var c=document.getElementById("canvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

上述代码首先通过id查找到canvas元素，再通过下面代码得到context对象

var cxt=c.getContext("2d");

具体小例子可以查看wc3school学习。

Context实例

一个时钟效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas" width="500" height="500" style="background-color: yellow;"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function drawClock(){
context.clearRect(0,0,500,500);
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hours = now.getHours();
//小时必须获取浮点类型 (小时+分钟/60)
hours = hours+min/60;
var hours = hours>12?hours-12:hours;

context.lineWidth = 10;
context.strokeStyle = "blue";
context.beginPath();
context.arc(250,250,200,0,360,false);
context.closePath();
context.stroke();

for(var i=0;i<12;i++){
context.save();
context.lineWidth = 7;
context.strokeStyle = "#000";
context.translate(250,250);
context.rotate(i*30*Math.PI/180);
context.beginPath();
context.moveTo(0,-170);
context.lineTo(0,-190);
context.closePath();
context.stroke();
context.restore();
}

for(var i=0;i<60;i++){
context.save();
context.beginPath();
context.lineWidth = 3;
context.strokeStyle = "#000";
context.translate(250,250);
context.rotate(i*6*Math.PI/180);
context.moveTo(0,-180);
context.lineTo(0,-190);
context.closePath();
context.stroke();
context.restore();
}

context.save();
context.lineWidth = 5;
context.strokeStyle = "#000";
context.beginPath();
context.translate(250,250);
context.rotate(hours*30*Math.PI/180);
context.moveTo(0,-130);
context.lineTo(0,10);
context.closePath();
context.stroke();
context.restore();

context.save();
context.lineWidth = 3;
context.strokeStyle = "#000";
context.beginPath();
context.translate(250,250);
context.rotate(min*6*Math.PI/180);
context.moveTo(0,-140);
context.lineTo(0,10);
context.closePath();
context.stroke();
context.restore();

context.save();
context.lineWidth = 1;
context.strokeStyle = "#ff0000";
context.beginPath();
context.translate(250,250);
context.rotate(sec*6*Math.PI/180);
context.moveTo(0,-160);
context.lineTo(0,15);
context.closePath();
context.stroke();
context.restore();
}
setInterval(drawClock,1000);
</script>
</body>
</html>

上述代码完成了一个web页面的时钟功能，具体的效果可以新建一个html文件，将其代码复制下来，最后将其拖到支持h5的浏览器即可运行。

效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航