html5 canvas学习--操作与使用图像
// 1.创建image对象
var img = new Image();
// 2.设定image对象的onload属性
img.onload = function(){
}
// 3.绘制图像
context.drawImage(image,x,y);
context.drawImage(image,x,y,width,height);
context.drawImage(image,x,y,sWidth,sHeight,dx,dy,dWidth,dHeight);// sWidth和sHeight是剪裁下来的宽度和高度,dx和dy为裁剪后图片放置的位置,dWidth和dHeight为显示图片的大小.
一.绘制图片并改变图片的大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function draw(){
var ctx = document.getElementById("myCanvas").getContext("2d");
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0,100,100);
ctx.font = "italic 60px Arial Black";
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0,0,0,0.7)";
ctx.fillStyle = "Green";
ctx.fillText("javascript !",50,165);
}
img.src = "1.ico";
}
window.onload = function(){
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="200"></canvas>
</body>
</html>
二.裁切图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function draw(){
var ctx = document.getElementById("myCanvas").getContext("2d");
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.drawImage(img,10,10,100,100,0,0,100,100);
}
img.src = "logo.png";
}
window.onload = function(){
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="1200" height="600"></canvas>
</body>
</html>
声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
- 上一篇： 使用mysql实现1-12月份查询统计
- 下一篇：没有了
