现在的很多浏览器都支持了html5了，所以html5里面的画布也是被广泛支持滴，想想是不是有点小激动呢，来吧，我们瞅瞅画布吧
画布：也就是html的一个正常元素，以<canvas>开始的标记。
话不多说，来，上代码:
/*该代码是实现在规定大小的画布里随机画20个正方形的实例啦*/
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<style>
canvas{
border:1px solid black;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="500" height="300">不支持画布</canvas>//这，就是我们的画布啦，可以直接设置它的宽高属性，当然你也可以通过css控制，
//如果你的浏览器不支持画布的话，它就会显示标记里面的”不支持画布“的字样哟
<script>window.οnlοad=function(){
var canvas=document.getElementById("mycanvas");//通过id拿到我们画布对象的引用
var context=canvas.getContext("2d");//我们需要一个画布的”2d“上下文来进行绘制我们的图像
for(var i=0;i<20;i++){
drawSquare(canvas,context); //画！
}
}
function drawSquare(canvas,context){
/*我们要画了，但是画之前我们得知道我们要从哪开始画呀，所以啊，我们需要拿到我们起始坐标。（这里要补充说的是画布左上角就是我们的坐标系的”原点“）
*/
//下面，我们通过随机数来得到我们的坐标和正方形的宽
var x=canvas.width*Math.random(); //x坐标var y=canvas.height*Math.random(); //y坐标
var w=Math.random()*50; //正方形的宽
context.fillStyle="red";//设置我们画笔的颜色值
context.fillRect(x,y,w,w);//画！！！
}
</script>
</body>
</html>
455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
