您的位置：首页 > 其它

把图片导入到canvas

2016-07-08 21:00 253 查看

把图片导入到canvas中，可以吧图片当做绘制图形的边框背景，也可以直接加载，注意点是进行的操作要在noload方法总进行，同时对她进行的变形操作都要在哪个方法外面进行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#myCanvas{border: 1px solid black;}
</style>
</head>
<body>
<canvas width="1000px" height="600px" id="myCanvas"></canvas>
</body>
<script type="text/javascript">
var oContent = document.getElementById("myCanvas").getContext('2d');
var img = new Image();
img.src = 'img/charector.png';
img.onload = function(){
var bg = oContent.createPattern(img,'no-repeat');

// 做背景图片
oContent.fillStyle = bg;

oContent.fillRect(0, 0, 300, 200);

alert('fuji')
// // 用边框显示图片
// oContent.strokeStyle = bg;
// oContent.lineWidth = 50;
// oContent.strokeRect(0,0,500,200)

//oContent.drawImage(img,0,0,300,200);
}

// 添加背景图片的图形不能再那个函数中进行变形
oContent.translate(200,200)
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航