Comments: This article mainly introduces the HTML5 Canvas jagged image code example. For more information, see
:
Tip: copy the code to an html file and save it. Open it directly to see the effect.
Implementation Code:
The Code is as follows: <! Doctype html>
<Html lang = "zh">
<Head>
<Meta charset = "gbk">
<Title> sawtooth chart </title>
<Script type = "text/javascript">
Window. addEventListener ("load", eventWindowLoaded, false );
Function eventWindowLoaded (){
Var x, y;
Var theCanvas = document. getElementById ("canvas ");
Var context = theCanvas. getContext ("2d ");
// Box
Context. strokeStyle = '# 00f ';
Context. lineWidth = 10;
Context. strokeRect (0, 0, theCanvas. width-0, theCanvas. height-0 );
Context. fillStyle = "# 00f ";
For (x = 5; x <= canvas. width; x = x + 10 ){
Context. beginPath ();
Context. arc (x, 5, 5, 0, Math. PI, false );
Context. closePath ();
Context. fill ();
Context. beginPath ();
Context. arc (x, canvas. height-5, 5, 0, Math. PI, true );
Context. closePath ();
Context. fill ();
}
For (y = 5; y <= canvas. height; y = y + 10 ){
Context. beginPath ();
Context. arc (5, y, 5, 0, Math. PI * 2, true );
Context. arc (canvas. width-5, y, 5, 0, Math. PI * 2, true );
Context. closePath ();
Context. fill ();
}
}
</Script>
</Head>
<Body>
<Div style = "position: absolute; top: 100px; left: 100px;">
<Canvas id = "canvas" width = "300" height = "300">
</Div>
</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
