在画布上绘制动画齿轮

你的浏览器不支持画布(Canvas).

我们可以通过新的HTML5画布（Canvas）标签添加一个画布到网页中，以下代码用于定义一个 800 x 600 大小的画布。

你的浏览器不支持画布(Canvas).
					

再通过以下 JavaScript 代码控制在画布中的绘图。

// 通过ID取画布元素
var mc = document.getElementById("MyCanvas");
var ctx = null;

// 旋转角度
var rotation = 0;

if(mc.getContext)
{
	// 创建 context 对象
	ctx = mc.getContext("2d");

	// source-over (default) 这是默认设置，新图形会覆盖在原有内容之上。
	// destination-over 会在原有内容之下绘制新图形。
	// source-in 新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的。
	// destination-in 原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的。
	// source-out 结果是只有新图形中与原有内容不重叠的部分会被绘制出来。
	// destination-out 原有内容中与新图形不重叠的部分会被保留。
	// source-atop 新图形中与原有内容重叠的部分会被绘制，并覆盖于原有内容之上。
	// destination-atop 原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形
	// lighter两图形中重叠部分作加色处理。
	// darker 两图形中重叠的部分作减色处理。
	// xor 重叠的部分会变成透明。
	// copy 只有新图形会被保留，其它都被清除掉。
	// 定义全局合成类型，可以为以上12种方式
	ctx.globalCompositeOperation = 'destination-over';

	// 定义图片源
	var cog = new Image();

	// 加载BASE64编码的PNG图片
	cog.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAGXRFWHRTb2Z0d2Fy \
	ZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABK1JREFUeNqMVt1ZGzkUvVfS4IW1l8GO82w6IBXE7mCpAFMB+Pt4Z6iApALcAe4AU \
	0HoAJfg7BPYHinnXmmciX+y0YdmJHnQ0bk/R5cvh5cUyFPwRD4EChgEvGWMB36R3+JaiTkmD5gOs8yNb25uLlerFf1pM2yIGA \
	82TEY7xow1oj4GBU6S6yywPNG4JwDH+XGv0Whs7ndN8n97mmPsLCSYgy7ImPQE/pFDyAF+7L0fgTNFUDBcLal90taD1doQ/T6 \
	NT9DnW8zkT+jJuQVYukG3hifCVk/L3JOxMBa8VVlSp9MhHKLaB+zpNo1fdgEpmByuMqUAV5viOQLwXNax9KBAFNEEpN1pUwnQ \
	mvl6aTza6zNjrCKaymeyOdYAMgfg18iG4T/qw+AC94zvpzDjcwqOXo3VGH26H0xMZ7jPxgT0R2zUi4BYt6bAfEbJvJFZKA4OD \
	gZ5nhcJLE9mk35X21vWC/TXKmiwr2xszoQd/PQv3t/QCzY2twpqBpb5FKOp+hCgzWaTWq0W1Xx0ij5An9WC5VtiLMwvNBrVaS \
	GMvQk5jHQVPN7sb0HzAtE+QJrNgrcUNEARieWCut0ugR0tl8sKcJ5Ahc3jRviPK8ZGTaaBwGKyT+gTiwM4a3Jrba6MbeVXo5F \
	4kp9shn29ndUYC9vLirGDXzRhrYhD8DME5Hkg22df5rDYS/RXmVIsaP/Q/SXs600YnifTjbeSWliEdTYb3QyTqYfdDKTL4B1K \
	S6tVqf6SgGq3P9BvZGpvNIrPCgVKZlGlCDQDxJiCjVppCab05DJHzb+b1Gm36X80cVjLuzozexs0f6IgRkA5XRhzIixRL1+Iz \
	hwdHVHrn1Y9oXe1i10aKT6bGGhg1CKK+cT0zCGCs0oXTIogybJMw/779/ \
	/o48duMvnO9rzLn+Kz8wgS5Shqo4njpCoOQA5Ajb \
	8adHh4SMvVghaLhYb/HsBip88krNVISSEigOlhjmi0LziNhr6wOsgO9C1339vbGznnNAU2AM9Svk235cqKieKGkldAf7DGvTr \
	jnjJnzyQoMu0ZTuZgUqvmlYR+f39XIE4uqCX1E/rDZpCYmKwOOmivAfYK9KF1AM7EdG4uAMLAOjmQideQXOJQkyUisqYiFRht \
	SFbxCxj8do0T30dmTvLhC+an0MZZVBHX09tBTG4qFigZEJEChjTIEwtRik81Qa7uOQU0IrYAe7FRjqYw6SlYjgAyN1GmHsFIG \
	PfVnxzFuFITKEkfYK+oWZ5qKlIkcZ7UE92oXBmeIgIxtAO5UtSHqo9uiLW+sme5ejSIRASeAFR4LYy8MMzL1aq3EYWzJF28Bg \
	MEzGYpBkrMKelgl+P6uTcVY8NjLYyYPwMTCcufSaouH6al9xNJcjC82vDb9uVZKbrWIumNO+waVsu1TCC+Wxcg6xaSpsZSYM2 \
	wLO9/U8qZWH+wztQnsfAxV/E3MIKZVf1FsmJVV8mamhEmxZ0X7sSsABsGv1tZJGejmptU7FBUDYzPAXQBwFEEl+9+stFEroJE \
	ci2ELwIMmZuWoSTE9DYYcWVCjlJrZWMpeBhlAEqBiulPE84S3ixU5gSTwGGOdyEVNJXxA8nPevshwABHktBS1YoQ+QAAAABJR \
	U5ErkJggg==';

	// 设置定时器
	setInterval(draw,10);
}

// 绘制图片动画
function draw()
{
	// 清空画布
	ctx.clearRect(0, 0, 800, 600);

	// 保存画布状态
	ctx.save();

	// 移动坐标原点到画布中心
	ctx.translate(400, 300);

	// 增加角度
	rotation +=1;

	// 旋转图片
	ctx.rotate(rotation * Math.PI / 180);

	// 绘制图片
	ctx.drawImage(cog, -13.5, -13.5);

	// 恢复上次保存的画布状态
	ctx.restore();
}
					

返回目录