<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
Steps to <!-- drawing: Get the canvas element - > get the context - > fill and draw the border - > set the drawing style - >
<!-- drawing other complex graphs requires paths: Start Creating Path - > Create Drawing Path - > Close Path - > Drawing Graph - >
<!--eg: Draw a rectangle - >
Draw a rectangle: <canvas id="ca"></canvas><br/>
Draw a circle: <canvas id="yuan"></canvas>
</body>
</html>
<scrip{filter}t>
Draw a rectangle
function draw(){
var canvas=document.getElementById('ca'); Get the canvas element
if (canvas==null)
return false;
var context=canvas.getContext('2d'); Get context
context.fillStyle='#EEEFF'; Fill color
context.fillRect(0,0,400,300); Fill Rectangle (Rectangle 1)
context.fillStyle='red';
context.strokeStyle='blue'; Border color
context.lineWidth=1; Bezel width
context.fillRect(50,50,100,100); Fill Rectangle (Inner Rectangle 2)
context.strokeRect(50,50,100,100); Draw the border
}
Draw circles
function drawarc(){
var canvas2=document.getElementById('yuan'); Get the canvas element
if (canvas2==null)
if(canvas2==null)
return false;
var context2=canvas2.getContext('2d'); Get context
context2.fillStyle='#EEEEEF';
context2.fillRect(0,0,400,300);
var n=0;
for(var i=0; i<10; i++){
context2.beginPath(); Start creating a path
context2.arc(i*25,i*25,i*10,0,Math.PI*2,true); Create a circular path
context2.closePath(); Close the path
context2.fillStyle='Rgba(255,0,0,0.25)'; Set the color
context2.fill(); Fill the graphic
}
}
</scrip{filter}t>
|
Posted on 12/14/2018 4:41:58 PM
|
|
|
|
Posted on 12/14/2018 5:18:19 PM
|
Posted on 12/14/2018 5:37:03 PM
|
