HTML5 <canvas> Second Strokerect Strokestyle () strokestyle () createlineargradient addcolorstop usage solid circle, hollow circle, gradient

Last Update:2017-03-12 Source: Internet

Author: User

Tags border color set background

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<!DOCTYPE HTML><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"><title>Untitled Document</title><Linkhref= "Css.css"rel= "stylesheet"type= "Text/css"><Scripttype= "Text/javascript"language= "JScript"src= "Js6.js"></Script></Head><BodyOnLoad= "pageload ();"><CanvasID= "Cnvmain"width= "200px"Height= "150px"; OnClick= "Cnvclick ();"></Canvas></Body></HTML>

1 @charset "Utf-8";2 / * CSS Document * /3 4 body{5 font-size:36px;6 }7 canvas{8 border:dashed 1px #F00;9 Cursor:pointer;Ten } One / * Add style * / A p{ - Position: - Absolute; the height:23px; - line-height:23px; - margin-left:10px; - } + span{ - padding:3px; + border:solid 1px #033; A background-color: #00F; at Cursor:pointer; -}

1 //JavaScript Document2 function $$ (ID) {3 return document.getElementById (ID);4     5     }6 function Pageload () {7 var cnv=$$ ("Cnvmain");8 var ctx=cnv.getcontext ("2d");9 //Set BorderTen ctx.strokestyle= "#3ef3ed"; One Ctx.strokerect (30,30,80,80); A //Set Background - ctx.fillstyle= "#ccc"; - Ctx.fillrect (30,30,80,80); the         } - function Cnvclick () { - var cnv=$$ ("Cnvmain"); - var ctx=cnv.getcontext ("2d"); + //Clear Graphics - Ctx.clearrect (36,36,50,50); +}

This is to draw a rectangle with a border

Draw Rectangle Border strokerect(x,y,width,height);

The parameter is "x", "Y" is the starting coordinate of the rectangle, and "width" "height" is the width and height of the rectangle, respectively.

Set border color strokestyle ();

Clears the color in the image clearrect ();

Draw gradient Colors

1 var C=document.getelementbyid ("MyCanvas"); 2 var ctx=c.getcontext ("2d"); 3 4 var grd=ctx.createlineargradient (0,0,170,0); 5 grd.addcolorstop (0, "Black"); 6 grd.addcolorstop (1, "white"); 7 8 ctx.fillstyle=grd; 9 Ctx.fillrect (20,20,150,100);

createlineargradient(Xstar, Ystar,xend,yend)
Xstar and Ystar represent the coordinates at which the gradient starts
Xend and yend represent the coordinates of the end of the gradient

addcolorstop(value,color); indicates gradient offset and gradient color

Draw a Circle

var cnv=$$ ("Cnvmain");        var Cxt=cnv.getcontext ("2d");        Clear the original drawing of the canvas 1        cxt.clearrect (0,0,280,190);        Start drawing solid round        cxt.beginpath ();        Cxt.arc (100,100,50,0,math.pi*2,true);        Cxt.closepath ();        Set fill background color        cxt.fillstyle= "#3ef3ed";        To fill        cxt.fill ();

The meaning of each parameter;

1.getContext ("2d"); Returns an environment for drawing on the canvas

2.Beginpath (): Declare start drawing path

3.Closepath (); Close the drawing path when you finish drawing the drawing.

4. Fill ( draw a solid circle )

1 //Set fill background color 2         cxt.fillstyle= "#3ef3ed"; 3         //Fill 4         Cxt.fill ();

Stroke ( Draw Hollow Circle )

Set border color        cxt.strokestyle= "BLACK";                Set border width    cxt.linewidth=5;        Perform stroke        cxt.stroke ();

From the Consortium

HTML5 <canvas> Second Strokerect Strokestyle () strokestyle () createlineargradient addcolorstop usage solid circle, hollow circle, gradient

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More