html5新标签-canvas元素

2012-02-20 10:02 8066 次阅读分类: XHTML+CSS, 前端相关 1 条评论

免打扰阅读

刚接触HTML5,相信不久的将来HTML5+CSS3可以将用户体验做得很好。html5之所以被神话，很大原因缘自html5新标签-canvas元素。canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。但不可否认的是canvas将HTML5的新特性表现得很淋漓尽致，这是一项新技术的崛起... flash,表示鸭梨山大啊，再次雕堡鸟....

下面一起来看下html5新标签-canvas元素最基本的画线、画圆、填充等操作的实现方法(直接复制代码，点相应按钮即可查看到运行效果，你懂得.... ^_^)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
</style>
</head>

<body>
<!--参考链接：https://www.cnblogs.com/yuzhongwusan/archive/2011/11/14/2248079.html-->
<!--标签中间的内容是替换内容，如果用户的浏览器不支持 <canvas> 标签，这段内容就会被显示出来；如果用户的浏览器支持 <canvas> 标签，则这段内容将被忽略。 -->
<!--默认canvas背景色是白色，前景色是黑色(绘制图案的颜色)-->
<canvas id="myCanvas" width="200" height="200" style="background:gray;">你的浏览器不支持 &lt;canvas&gt;标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas><!-- canvas标签必须在标签内定义width、height属性值，css定义渲染图像会缩放来适应布局的,这就会导致绘制的图像大小形状显示错误！-->
<input type="button" value="清除画布"  onclick="clearRect()"/>
<input type="button" value="画矩形"  onclick="drawRect();"/>
<input type="button" value="画三角形"  onclick="drawTri();"/>
<input type="button" value="画圆"  onclick="drawMap();"/>

<script type="text/javascript">
//canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
//画矩形
	function drawRect(){
		var c=document.getElementById('myCanvas');
		var cxt=c.getContext('2d');
		cxt.fillStyle='#f00';// fillStyles即填充颜色，若要描边可换成trokeStyle，后面的对应换成strokeRect()即可
		cxt.fillRect(0,0,100,100);//前两参数是x,y轴坐标;后两参数是矩形长、宽
		}
//画三角形
	function drawTri(){
		var c=document.getElementById('myCanvas');
		var cxt=c.getContext('2d');
		cxt.beginPath();//开始绘制，可选
		cxt.moveTo(0,0); //将绘制点定位到(0,0)坐标轴上
		cxt.lineTo(100,0);
		cxt.lineTo(100,100);
		cxt.closePath();
		cxt.stroke();//描边，必须！可换成ctx.fill(),即填充
	}

//画圆：在arc接口中，前两个参数x,y指定了要绘制的圆弧的圆心坐标，radius是圆的半径，startAngle和endAngle指定了弧的起始和结束的角度，anticlockwise指定是否使用逆时针方向绘图。
function drawMap(){
        var canvas = document.getElementById('myCanvas');
        var ctx=canvas.getContext("2d");
        ctx.beginPath();//开始绘制，可选
        ctx.arc(100,100,50,0,Math.PI*2,true);//一个圆即Math.PI*2
		ctx.closePath();//结束绘制，可选
		ctx.stroke();//填充，必须！
}
//清除画布内容
	function clearRect(){
        var canvas = document.getElementById('myCanvas');
        var ctx=canvas.getContext("2d");
        ctx.clearRect(0,0,200,200);//清除画布(上下文对象)上(0,0)到(200,100)区域内的图像
		}

</script>
<p style="margin-top:20px;position:relative; text-align:center; border:2px #abb8be solid;"><b style="width:150px; height:20px; line-height:20px; text-align:center;position:absolute;left:50%;top:-10px;margin-left:-210px; background:#fff;">画圆解析图：</b><img src="https://www.phpvar.com/phpvar/wp-content/uploads/html5_arc参数图解.png" alt="" title="html5_arc参数图解" width="570" height="250" class="alignnone size-full wp-image-588" /></p>
</body>
</html>