html5简单的实例–画两条交叉线

在前面的文章中,我们已经学习了什么是canvas,怎么获得context,以及在canvas中怎么设置它的宽和高,以及canvas的宽和高和在style里面设置的宽和高是不一样的!~ 现在我们就来同过html5画一个交叉的线!~

输入代码:

————————————————————————————————————————

<!DOCTYPE HTML>
<html>
<head>
<title>画两条交叉线</title>
<script>
function draw(){
var canvas=document.getElementById(“my”);
var context=canvas.getContext(“2d”);
context.beginPath();
context.moveTo(0,0);
context.lineTo(200,200);
context.moveTo(200,0);
context.lineTo(0,200);
context.stroke();
}

window.addEventListener(“load”,draw,true);
</script>
</head>

<body>
<canvas id=”my” width=”200″ height=”200″ style=”border:solid 1px red;”></canvas>
</body>
</html>

————————————————————————————————————————–

查看效果:http://www.cangzhang.com/wp-content/uploads/2012/08/drawline1.htm

共有 0 条评论

Top