首先明白使用canvas绘制图像文件需要用到CanvasRenderingContext2D对象的主要属性和方法：
drawImage(mixed image, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight)
将指定图像的局部图像(以(imageX, imageY)为左上角、宽度为imageWidth、高度为imageHeight的矩形部分)绘制到canvas中以(canvasX,canvasY)为左上角坐标、宽度为canvasWidth、高度为canvasHeight的矩形区域中
也就是说我们可以使用一个名为drawImage()的方法。
素材如下：
1111.png
2222.png
3333.png
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas画图测试</title>
<style type="text/css">
img{width:200px;height:auto;}
</style>
</head>
<body>
<img src = "1111.png" class = "srcimg">
<img src = "2222.png" class = "srcimg">
<img src = "3333.png" class = "srcimg"><br/>
<input type="button" name="" value = "画一画" id = "btn"><br/><br/>
<canvas id = "mycv" width = "600px" height = "600px" style = "border:1px solid black;">
您的浏览器不支持canvas标签
</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycv");
var btn = document.getElementById("btn");
var img = document.getElementsByClassName("srcimg");
btn.onclick = function() {
//clear
canvas.height = canvas.height;
if(canvas.getContext) {
var ctx = canvas.getContext("2d");
//drawImage(mixed image, int x, int y, int width, int height)
ctx.drawImage(img[0], 0, 0, 600, 600);
ctx.drawImage(img[1], 10, 100, 400, 400);
ctx.drawImage(img[2], 300, 400, 200, 200);
}
}
</script>
</html>
画完效果如下（原谅我审美不咋地，凑合看）:
注意啊，第一张可以是jpg其余的素材最好是透明的png。否则你的图只是一层一层被画完覆盖了。是不是类似一个模拟的合成图片。哟吼吼~然后，这样子你会想。我要把我最后生成的图片导出来送我女朋友咋办呢？
canvas是很善解人意的：画布(canvas)对象有一个非常有用的方法:toDataURL()
。这个方法能把画布里的图案转变成base64编码格式的png，然后返回[ Data URL]数据。
这样子我们再来一遍代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas画图测试</title>
<style type="text/css">
img{width:200px;height:auto;}
</style>
</head>
<body>
<img src = "${ctx}${themes_path}/images/1111.png" class = "srcimg">
<img src = "${ctx}${themes_path}/images/2222.png" class = "srcimg">
<img src = "${ctx}${themes_path}/images/3333.png" class = "srcimg"><br/>
<input type="button" name="" value = "画一画" id = "btn"><br/><br/>
<img src = "" id = "newImage">
<canvas id = "mycv" width = "600px" height = "600px" style = "border:1px solid black;display:none;">
您的浏览器不支持canvas标签
</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycv");
var btn = document.getElementById("btn");
var img = document.getElementsByClassName("srcimg");
var newImgae = document.getElementById("newImage");
btn.onclick = function() {
//clear
canvas.height = canvas.height;
if(canvas.getContext) {
var ctx = canvas.getContext("2d");
//drawImage(mixed image, int x, int y, int width, int height)
ctx.drawImage(img[0], 0, 0, 600, 600);
ctx.drawImage(img[1], 10, 100, 400, 400);
ctx.drawImage(img[2], 300, 400, 200, 200);
}
//好腻害 可以指定生成的类型呢
canvasToImage(canvas,newImage);
}
function canvasToImage(canvas,image) {
//var image = new Image();//可以指定任意图片。这里只是为了测试一下保存图片到本地
//解决 canvas 跨域 toDataURL不能读取问题
image.crossOrigin = "Anonymous";
image.src = canvas.toDataURL("image/png");//转换为png图片。可自行更换
//return image;
}
</script>
</html>
要注意的问题是必须必须在wap环境里跑否则无效哦
另保存图片目前采取的是同后台相配合~这里就不贴了。
网友评论