发帖
雷达卡
插入图像
使用drawImage函数直接在指定位置插入图像平铺图像
var img = new Image();
img.src = "img01.png";
img.onload=function(){
ctx.drawImage(img,0,0);
};
onload事件会在图像或页面加载完成后立即发生（这个例子是解决页面加载和刷新时不显示图像的问题）
绘制平铺图像时，需要用到Canvas的createPattern函数（两个参数，第一个参数为平铺的图像，第二个参数确定以哪种方式进行平铺，可选为repeat水平和垂直方向的平铺；repeat-x水平方向重复；repeat-y垂直方向重复；no-repeat不重复）
完整代码：
<!DOCTYPE html>
<html>
<head>
<title>4.6.2.html</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="1200" height="600">your browser dont support it.</canvas>
<script type="text/javascript">
var image=new Image();
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
image.src="002.png";
image.onload=function(){
var ptrn =ctx.createPattern(image, "repeat");
ctx.fillStyle = ptrn ;
ctx.fillRect(0, 0, 600,600);
};
</script>
</body>
</html>
提升卡
置顶卡
沉默卡
变色卡
抢沙发
千斤顶
显身卡
京公网安备 11010802022788号
