HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。试例代码:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
不支持canvas标签</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff" <!--设置或返回用于填充绘画的颜色、渐变或模式-->
ctx.fillRect(20,20,150,100); <!--绘制“被填充”的矩形-->
</script>
</body>
</html>在画布上添加一张图片:
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
image = new Image();
image.onload = function(){
context.drawImage(image, 50, 50, 44, 101);
};
image.src = "hero.png";
};
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
