650) this.width=650; "Src=" https://s3.51cto.com/wyfs02/M02/8C/EE/wKiom1h96LqibJCCAAASF-6YRK0853.png-wh_500x0-wm_ 3-wmp_4-s_3698247617.png "title=" Qq20170117173608.png "alt=" Wkiom1h96lqibjccaaasf-6yrk0853.png-wh_50 "/>
HTML structure
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<title>canvas10</title>
<link rel= "stylesheet" href= "" >
<body>
<canvas id= "canvas" style = "border:1px solid #aaa;d iplay:block;margin:50px auto;" >
The current browser does not support canvas, please change your browser and try again
</canvas>
</body>
JS Script
<script>
Window.onload = function () {
var canvas = document.getElementById (' canvas ');
Canvas.width = 800;
Canvas.height = 800;
var context = Canvas.getcontext (' 2d ');
DrawRect (context,100,100,400,400,10, "#058", "Red");
}
function DrawRect (context,x,y,width,height,borderwidth,bordercolor,fillcolor) {
Context.beginpath ();
Context.rect (X,y,width,height);
Context.closepath ();
Context.linewidth = BorderWidth;
Context.fillstyle = FillColor;
Context.strokestyle = bordercolor;
Context.fill ();
Context.stroke ();
}
</script>
This article is from the "Yan" blog, please be sure to keep this source http://suyanzhu.blog.51cto.com/8050189/1892696
Canvas draws body shape and fills-2
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
