Home > Developer > Web Develop
Drawing steps
get the canvas object
var Ocanvas = document.getElementById ("Canvas");
Get Contextual context
var context = Ocanvas.getcontext ("2d");
Draw a graphic
Select a method based on demand
Draw Rectangle / border / fill color
context.linewidth=1;
Context.fillrect (X,y,width,height);
Context.strokerect (X,y,width,height);
<HTML> <Head> <MetaCharSet= "UTF-8"> <title>Canvas-Rectangle</title> <Metaname= "Viewport"content= "Width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </Head> <Body> <CanvasID= "Canvas"width= "$"Height= "$"></Canvas> <Scripttype= "Text/javascript"> //two necessary conditions //1. Get the Canvas object varOcanvas=document.getElementById ("Canvas"); //2. Get Context varContext=Ocanvas.getcontext ("2d"); //I. Context do operations, draw graphics //1. Color, CSS styleContext.fillstyle= "#ededed"; //2. Beginning end width height, execution, fillrect filled rectangle, filledContext.fillrect (0,0, -, -); Context.fillstyle= "Red"; Context.fillrect ( -, -, -, -); //border, Strokerect no fill, strokestyle default blackContext.strokestyle= '#40bfe0'; Context.linewidth= '4'; //the width of the box, default 1Context.strokerect ( -, -, -, -); </Script> </Body></HTML>
HTML5 canvas-1 Canvas Rectangle
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
