<html5 canvas>一个简单的矩形，clearRect(), strokeRect(), fillRect(), 鼠标事件onmousedown

最新推荐文章于 2024-04-15 10:32:48 发布

MMMMMayC

最新推荐文章于 2024-04-15 10:32:48 发布

阅读量1.6k

点赞数

分类专栏：实例代码

本文链接：https://blog.csdn.net/qq_17615475/article/details/50531947

版权

实例代码专栏收录该内容

19 篇文章 0 订阅

订阅专栏

（《HTML5 Canvas核心技术图形／动画与游戏开发》学习［1］）

html5:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Rectangle</title>
<style>
	body{
		background:#dddddd;
	}
	#canvas{
		background:#eeeeee;
		border:1px solid #000000;
	}
</style>
</head>

<body>
	<canvas id="canvas" width="600" height="400">
    	Canvas not supported
    </canvas>
    <script src="rectangle.js"></script>
</body>
</html>

javascript:

// JavaScript Document
var canvas=document.getElementById('canvas'),
	context=canvas.getContext('2d');

context.lineJoin='round';
context.lineWidth=30;

context.font='24px Helvetica';
context.fillText('Click anywhere to erase',175,40);

context.strokeRect(75,100,200,200);
context.fillRect(325,100,200,200);

context.canvas.οnmοusedοwn=function(e){
	context.clearRect(0,0,canvas.width,canvas.height);	
};

js代码的大概结构为：

1. 使用document.getElementById()方法来获取指向canvas的引用。

2. 在canvas对象上调用getContext('2d')方法，获取绘图环境变量。

3. 然后通过绘图环境对象在canvas元素上进行绘制。

代码的前两行基本上是固定的。

lineJoin: 当两条线交汇时创建边角类型。

属性值：beval（斜角），round（圆角），miter（尖角，默认）。

lineWidth: 设置线条宽度，默认为1。

fillText(): 参数（按顺序）：要输出的文本，x坐标，y坐标，允许的最大文本宽度。

strokeRect(): 参数：x坐标，y坐标，宽度，高度。作用：为矩形描边，用strokeStyle, lineWidth, lineJoin, MiterLimit属性。

fillRect(): 参数同上。作用：填充矩形，用fillStyle属性。

clearRect(): 参数同上。将矩形与当前剪辑区域相交范围内的所有像素清除。