<!DOCTYPEHTML>
<html>
<head>
<scriptlanguage="javascript">
function draw(){
var ctx =document.getElementById('myCanvas').getContext('2d');
var img =new Image();
img.onload = function(){
设定图标的起始点(0,0)
ctx.drawImage(img,0);
设定图片的字体
ctx.font = "italic 60pxArial Black";
设置阴影
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
阴影模糊度
ctx.shadowBlur = 2;
阴影模颜色
ctx.shadowColor = "rgba(0,0.7)";
画布是白色
ctx.fillStyle = "White";
填充字体
ctx.fillText("COOL",50,165);
}
img.src = 'images/bg.jpg';
}
window.onload=function(){
draw();
}
</script>
</head>
<body>
<canvasid="myCanvas"width="300"height="200"></canvas>
</body>
</html>
设置图片大小
<!DOCTYPE HTML>
<html>
<head>
<script language="javascript">
function draw(){
var ctx =document.getElementById('myCanvas').getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,847,797);
ctx.font = "italic 60pxArial Black";
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0,0.7)";
ctx.fillStyle = "White";
ctx.fillText("COOL",165);
}
img.src = 'images/bg.jpg';
}
window.onload=function(){
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="300"height="200"></canvas>
</body>
</html>
图片切片
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="600"height="380"></canvas>
<script language="javascript">
function draw() {
var ctx =document.getElementById('myCanvas').getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0);
ctx.drawImage(img,30,40,140,180,240,180);
}
img.src = 'images/bg1.jpg';
}
window.onload=function(){
draw();
}
</script>
</body>
</html>
