代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>practice</title>
<script>
function createArcile(id) {
var canvas = document.getElementById(id);
var ctx = canvas.getContext("2d");
//ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true);
ctx.stroke();
}
function LinerGradient(id) {
var canvas = document.getElementById(id);
var ctx = canvas.getContext('2d');
var g1 = ctx.createLinearGradient(0,0,0,300);
g1.addColorStop(0,"#FFA07A");
g1.addColorStop(1,"#FFA500");
ctx.fillStyle = g1;
ctx.fillRect(0,0,400,400);
var g2 = ctx.createLinearGradient(0,0,300,0);
g2.addColorStop(0,"rgb(255,0,255)");
g2.addColorStop(1,"rgb(0,0,255)");
for(var i=0;i<10;i++){
ctx.beginPath();
ctx.fillStyle = g2;
ctx.arc(i*25,i*25,i*10,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
ctx.fill();
}
}
function path(id) {
var canvas = document.getElementById(id);
var ctx = canvas.getContext('2d');
ctx.fillStyle = "blue";
ctx.fillRect(0,0,400,400);
for(var i=0;i<10;i++){
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(i*25,i*25,i*10,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
ctx.fill();
}
}
function RadialGradient(id) {
var canvas = document.getElementById(id);
var ctx = canvas.getContext('2d');
var g1 = ctx.createRadialGradient(200,200,50,200,200,30);
g1.addColorStop(0,"rgb(255,255,0)");
g1.addColorStop(1,"rgb(0,255,255)");
ctx.fillStyle = g1;
ctx.fillRect(0,0,400,400);
ctx.fill();
ctx.stroke();
}
</script>
</head>
<body onload="RadialGradient('canvas')">
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html><!DOCTYPE html>
<html lang="en">
<he
