html5学习之路(Canvas画布1)

发布时间:2017-09-09 10:40:49
html5学习之路(Canvas画布1) 使用canvas画一个矩形,专题系统,圆和直线

[html]

<!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> www.2cto.com

</html>

显示效果:

,专题

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:荆州网站建设 http://jingzhou.45qun.com