html5学习之路（Canvas画布一）
日期：2014-05-17 浏览次数：20647 次
html5学习之路（Canvas画布1）
使用canvas画一个矩形，圆和直线
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas示例</title>
<script type="text/javascript">
function mydrawRect(){
var canvas=document.getElementById("rect");
if (canvas==null){
return false;
}
var context=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
context.fillStyle="red";
context.strokeStyle="blue";
context.lineWidth=1;
//绘制一个矩形
context.fillRect(50,50,100,100);
context.strokeRect(50,50,100,100);
//绘制一个圆
context.beginPath();
context.arc(200,200,50,0,Math.PI*2,true);
context.closePath();
context.fillStyle='rgba(255,0,0,0.25)';
context.fill();
//画直线
context.beginPath();
context.moveTo(100,100);
context.lineTo(100,300);
context.lineTo(300,300);
context.closePath();
//context.fillStyle='rgba(255,0,0,0.25)';
//context.fill();
context.stroke();
}
</script>
</head>
<body onload="return mydrawRect();">
<canvas id="rect" width="400" height="300">
</body>
</html>
显示效果：
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
