<!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