html5-canvas

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
canvas {
	background:#eee;	
}
</style>
<script type="text/javascript">
window.onload = function() {
	var canvas = document.getElementById("myCanvas");
	var context=canvas.getContext('2d');
	context.fillStyle   = '#00f'; // blue
	context.strokeStyle = '#f00'; // red
	context.lineWidth   = 4;
	 
	// Draw some rectangles.
	context.fillRect  (0,   0, 150, 50);  //fillRect 可以绘制带填充的矩形
	context.strokeRect(0,  60, 150, 50);  //使用 strokeRect 可以绘制只有边框没有填充的矩形
	context.clearRect (30, 25,  90, 60);  //清除部分 canvas
	context.strokeRect(30, 25,  90, 60);  //x坐标, y坐标, width, height
}
</script>
</head>


<body>
<canvas id="myCanvas" width="800" height="800">error</canvas>
</body>
</html>
每一个canvas 元素都有一个”上下文( context )” (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上下文,并通过不同的API 提供图形绘制功能。
阅读更多
想对作者说点什么? 我来说一句

html5 视频解压 时间轴

2013年01月30日 29.1MB 下载

Html5-Canvas 贪吃蛇

2016年03月12日 62KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭