如何在 HTML5 画布上绘图_IT百科

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

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

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

步骤 3: 显示位图图像

步骤 4: 渐变

步骤 5: 动画

步骤 6: 更多 HTML5 画布提示

<body>

</canvas>

var c = document.getElementById("myCanvas")

var ctx = c.getContext("2d")

var img = new Image()

img.onload = function() {

ctx.drawImage(img, 0, 0)

}

img.src = "1.png"

</script>

</body>

drawimage必须异步加载才能获取资源, 方法是img添加onload触发drawimage，否则必须在地址栏按回车键才能正常显示

<!DOCTYPE HTML>

<html>

<body>

Your browser does not support the canvas element.

</canvas>

window.onload = function(){

var c=document.getElementById("myCanvas")

var cxt=c.getContext("2d")

var img=new Image()

img.src="http://www.w3school.com.cn/i/eg_flower.png"

img.onload = function(){

cxt.drawImage(img,0,0)

}

</script>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

如何在 HTML5 画布上绘图