在画布上绘制动画图片

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

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

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

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

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

var imgW = 0;
var imgH = 0;

// 取画布大小
var XSize = mc.width;
var YSize = mc.height;

var x = 0;
var y = 0;

// 每次移动数量
var dx = 0.75;

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

	// 加载图片
	var img = new Image();
	img.src = '/IBlog/Html5/22Canvas_MoveImage/Back.jpg';

	// 加载完成后
	img.onload = function()
	{
		// 取加载图片的宽和高
		imgW = img.width;
		imgH = img.height;

		// 拉伸图片与画布一致
		// imgW = mc.width;
		// imgH = mc.height;

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

function draw()
{
    // 先清画布
    ctx.clearRect(0, 0, XSize, YSize);

	// 位置计算
    if (imgW <= XSize)
    {
        if (x > XSize)
        {
        	x = 0;
        }

        if (x > (XSize-imgW))
        {
        	ctx.drawImage(img, x-XSize+1, y, imgW, imgH);
        }
    }
    else
    {
        if (x > XSize)
        {
        	x = XSize-imgW;
        }

        if(x > (XSize-imgW))
        {
        	ctx.drawImage(img, x-imgW+1, y, imgW, imgH);
        }
    }

	// 绘制图片
    ctx.drawImage(img, x, y, imgW, imgH);

    // 每次移动量
    x += dx;
}
					

返回目录