如何在 HTML5 画布上绘图

在 HTML5 画布上绘图方法步骤如下：这路这说明大致步骤，具体实现可以网上查找

步骤 1: 在 HTML 中设置画布，创建一个引用，并获取上下文对象

步骤 2: 绘制矩形、直线、贝塞尔曲线、圆和形状

步骤 3: 显示位图图像

步骤 4: 渐变

步骤 5: 动画

步骤 6: 更多 HTML5 画布提示

把 cxt.drawImage(img, 0, 0)

换成

img.onload = function ()

{

    cxt.drawImage(img, 0, 0)

}

试试

<img src="......." id="img1" />

<img src="......." id="img2" />

<img id="img3" /> var img1 = document.getElementById("img1"),

    img2 = document.getElementById("img2"),

    img3 = document.getElementById("img3")

var canvas = document.createElement("canvas"),

    context = canvas.getContext("2d")

canvas.width = img1.naturalWidth + img2.naturalWidth

canvas.height = Math.max(img1.naturalHeight,img2.naturalHeight)

// 将 img1 加入画布

context.drawImage(img1,0,0,img1.naturalWidth,img1.naturalHeight)

// 将 img2 加入画布

context.drawImage(img1,img2.naturalWidth,0,img2.naturalWidth,img2.naturalHeight)

// 将画布内容导出

var src = canvas.toDataURL()

img3.src = src <p>drawImage 的使用方法可以去这里看一下</p>

<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage" />

---