HTML5 canvas (image), html5 canvas Image
Case 1:
<!DOCTYPE html>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
var image= new Image();
image.src="shanchu.png";
cxt.drawImage(image,0,0);
}
</script>
<body>
<canvas id="myCanvas" width="450" height="350">：
Note:
(1) Use the drawImage method to draw an image:
Method 1: cxt. drawImage (image, x, y );
An image is an Image object that is used to load image files. X and y are the starting coordinates of the image in the canvas.
Method 2: cxt. drawImage (image, x, y, w, h );
The first three parameters are the same as above. w and h refer to the width and height of the image during painting.
Method 3: cxt. drawImage (image, sx, sy, sw, sh, dx, dy, dw, dh );
Sx and sy indicate the start and start abscissa of the copied area of the source image in the canvas respectively. sw and sh indicate the width and height of the copied area, dx and dy indicate the start and start abscissa of the copied target image in the canvas, dw and dh indicate the width and height of the copied target image. This method can only copy the local image, as long as the sx and sy are set as the starting point coordinates of the local area, the sw and sh are set as the width and height of the local area.
Case 2:
<! DOCTYPE html>
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> </title>
<Script>
Window. onload = function (){
Var c = document. getElementById ("myCanvas ");
Var cxt = c. getContext ("2d ");
Var image = new Image ();
Image. src = "shanchu.png ";
Cxt. drawImage (image, 200,200 );
Cxt. drawImage (image, 0, 0, 100,100,210, 0,200,200 );
}
</Script>
</Head>
<Body>
<Canvas id = "myCanvas" width = "450" height = "350">:
Case 3:
<!DOCTYPE html>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
var image= new Image();
image.src="shanchu.png";
drawImage(cxt,image);
}
function drawImage(cxt,image)
{
var i=0;
for(i=0;i<5;i++)
{
cxt.drawImage(image,0+i*50,0+i*30,100,100);
}
}
</script>
<body>
<canvas id="myCanvas" width="450" height="350">：
Image tile
Case 1:
<! DOCTYPE html>
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> </title>
<Script>
Window. onload = function (){
Var c = document. getElementById ("myCanvas ");
Var cxt = c. getContext ("2d ");
Var image = new Image ();
Image. src = "shanchu.png ";
Var ptrn = cxt. createPattern (image, 'repeat ');
Cxt. fillStyle = ptrn;
Cxt. fillRect (450,350 );
}
</Script>
</Head>
<Body>
<Canvas id = "myCanvas" width = "450" height = "350">:
Note:
(1) cxt. createPattern (image, type );
This method uses two parameters. The image parameter is the image to be tiled. The value of the type parameter must be one of the following string values:
No-repeat: not tiled
Repeat-x: tiled horizontally
Repeat-y: tiled in the vertical direction
Repeat: tiled in all directions
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
