html5使用图像-绘制图像
2016-05-09 20:27
381 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用图像</title>
<script>
function draw(id){
var c=document.getElementById('canvas');
if(c==null)
return false;
var cxt=c.getContext("2d");
var img=new Image();
img.src="img/11.jpg";
// cxt.drawImage(img,0,0);//这种写法是不对的，要在图片加载后再将其显示在画布上，否则不会显示出来
img.onload=function(){
cxt.drawImage(img,0,0);
}
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="600" height="600" style="border:1px solid blue;"></canvas>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>使用图像</title>
<script>
function draw(id){
var c=document.getElementById('canvas');
if(c==null)
return false;
var cxt=c.getContext("2d");
var img=new Image();
img.src="img/11.jpg";
// cxt.drawImage(img,0,0);//这种写法是不对的，要在图片加载后再将其显示在画布上，否则不会显示出来
img.onload=function(){
cxt.drawImage(img,0,0);
}
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="600" height="600" style="border:1px solid blue;"></canvas>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html5创建变换图形-阴影图形
- HTML5基础入门教程
- Html5 上传图片
- H5--实现“扫描指纹”进入下一页效果
- HTML5音频与视频实例（带声音的导航、视频与canvas结合、自制播放器）
- HTML5 -- 使用css3实现简单的响应式布局
- 有趣的HTML5：离线存储
- H5中section和article标签之间的区别
- HTML5之音频与视频
- 认识HTML5的WebSocket
- HTML5之viewport使用
- html5新加哪些特性
- HTML5--》点击显示隐藏内容
- HTML5--》details
- HTML5列表
- HTML5之本地存储
- HTML5样式 链接 表格
- html5图形组合
- html5绘制变换图形-旋转图形
- PJAX初体验（主要是利用HTML5 新增API pushState和replaceState+AJAX）