In two steps:
1. The size of the canvas is the size of the rectangle.
[Html]
<Body onload = "drawRect ();">
<Canvas id = "canvas" width = "100" height = "500">
Aaa
</Canvas>
</Body>
2. Code drawn to a rectangle
[Html] www.2cto.com
<Script>
Var IMG_SRC = "./1.jpg ";
Function drawRect (){
Var canvas = document. getElementById ("canvas ");
Var context = canvas. getContext ("2d ");
// Context. strokeRect (50, 50,120,120 );
Var img = new Image ();
// Triggered when the image is loaded
Img. onload = function (){
Context. drawImage (img, 0, 0 );
}
Img. src = IMG_SRC;
}
</Script>
All code:
[Html]
<! Doctype html>
<Html>
<Head>
<Title> HTML5 Canvas Sample </title>
<Script>
Var IMG_SRC = "./1.jpg ";
Function drawRect (){
Var canvas = document. getElementById ("canvas ");
Var context = canvas. getContext ("2d ");
// Context. strokeRect (50, 50,120,120 );
Var img = new Image ();
// Triggered when the image is loaded
Img. onload = function (){
Context. drawImage (img, 0, 0 );
}
Img. src = IMG_SRC;
}
</Script>
</Head>
<Body onload = "drawRect ();">
<Canvas id = "canvas" width = "100" height = "500">
Aaa
</Canvas>
<Canvas id = "canvas1" width = "500" height = "500">
Bbb
</Canvas>
</Body>
</Html>
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
