| |
<!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title></title> |
| |
</head> |
| |
<body> |
| |
<canvas id="mycas" width="400" height="400"></canvas> |
| |
<div> |
| |
<input type="button" value="绘制路径1" onclick="lujing1()"/> |
| |
|
| |
<input type="button" value="绘制渐变1" onclick="jianbian1()"/> |
| |
<input type="button" value="绘制渐变2" onclick="jianbian2()"/> |
| |
|
| |
<input type="button" value="绘制渐变3" onclick="jianbian3()"/> |
| |
<input type="button" value="绘制渐变4" onclick="jianbian4()"/> |
| |
</div> |
| |
<div> |
| |
<input type="button" value="绘制线条粗细1" onclick="xiantiao()"/> |
| |
|
| |
<input type="button" value="绘制变化的坐标" onclick="bianhua()"/> |
| |
<input type="button" value="绘制缩放效果" onclick="bianhua2()"/> |
| |
<input type="button" value="绘制旋转效果" onclick="bianhua3()"/> |
| |
</div> |
| |
<script> |
| |
function bianhua3(){ |
| |
var cas = document.getElementById("mycas"); |
| |
var g = cas.getContext("2d"); |
| |
|
| |
g.translate(200, 200); |
| |
|
| |
for(var i=0; i<36; i++){ |
| |
g.rotate(10*Math.PI/180); |
| |
g.fillRect(100, 100, 100,100); |
| |
} |
| |
|
| |
} |
| |
function bianhua2(){ |
| |
var cas = document.getElementById("mycas"); |
| |
var g = cas.getContext("2d"); |
| |
|
| |
g.fillRect(20, 20, 50,50); |
| |
|
| |
g.fillStyle="blue"; |
| |
g.translate(50, 10); |
| |
g.scale(2,0.5); |
| |
g.fillRect(20, 20, 50,50); |
| |
|
| |
g.fillStyle="yellow"; |
| |
g.translate(50, 10); |
| |
g.scale(2,2); |
| |
g.fillRect(20, 20, 50,50); |
| |
|
| |
|
| |
} |
| |
function bianhua(){ |
| |
var cas = document.getElementById("mycas"); |
| |
var g = cas.getContext("2d"); |
| |
|
| |
g.fillRect(20, 20, 50,50); |
| |
|
| |
g.fillStyle="blue"; |
| |
g.translate(100, -10); |
| |
g.fillRect(20, 20, 50,50); |
| |
|
| |
} |
| |
function xiantiao(){ |
| |
var cas = document.getElementById("mycas"); |
| |
var g = cas.getContext("2d"); |
| |
|
| |
g.moveTo(10,10); |
| |
g.lineTo(200, 300); |
| |
|
| |
g.lineWidth=30; |
| |
g.stroke(); |
| |
|
| |
} |
| |
function jianbian4(){ |
| |
var cas = document.getElementById("mycas"); |
| |
var g = cas.getContext("2d"); |
| |
|
| |
var cg = g.createRadialGradient(100,100, 50, 60,80, 100); |
| |
cg.addColorStop(0, "blue"); |
| |
cg.addColorStop(1, "yellow"); |
| |
|
| |
g.fillStyle=cg; |
| |
|
| |
g.arc(100, 100, 120, 0, Math.PI*2); |
| |
|
| |
g.fill(); |
| |
} |
| |
function jianbian3(){ |
| |
var cas = document.getElementById("mycas"); |
| |
var g = cas.getContext("2d"); |
| |
|
| |
var cg = g.createRadialGradient(100,100, 50, 100,100, 100); |
| |
cg.addColorStop(0, "blue"); |
| |
cg.addColorStop(1, "yellow"); |
| |
|
| |
g.fillStyle=cg; |
| |
|
| |
g.arc(100, 100, 120, 0, Math.PI*2); |
| |
// g.stroke(); |
| |
g.fill(); |
| |
// g.fillRect(0, 0, 300, 300); |
| |
} |
| |
function jianbian2(){ |
| |
var cas = document.getElementById("mycas"); |
| |
var g = cas.getContext("2d"); |
| |
|
| |
var cg = g.createLinearGradient(50,50, 250,250); |
| |
cg.addColorStop(0, "blue"); |
| |
cg.addColorStop(1, "yellow"); |
| |
|
| |
g.fillStyle=cg; |
| |
|
| |
g.fillRect(30, 30, 300, 300); |
| |
} |
| |
function jianbian1(){ |
| |
var cas = document.getElementById("mycas"); |
| |
var g = cas.getContext("2d"); |
| |
|
| |
var cg = g.createLinearGradient(50,50, 300,50); |
| |
cg.addColorStop(0, "blue"); |
| |
cg.addColorStop(0.6, 'gray'); |
| |
cg.addColorStop(1, "yellow"); |
| |
|
| |
g.fillStyle=cg; |
| |
|
| |
g.fillRect(0, 50, 400, 200); |
| |
} |
| |
function lujing1(){ |
| |
var cas = document.getElementById("mycas"); |
| |
var g = cas.getContext("2d"); |
| |
|
| |
g.beginPath(); |
| |
g.arc(100,100, 50, Math.PI*4/3, Math.PI*2/3, false); |
| |
g.lineTo(100, 100); |
| |
g.closePath(); |
| |
g.stroke(); |
| |
g.fill(); |
| |
|
| |
g.beginPath(); |
| |
g.fillStyle='blue'; |
| |
g.arc(95,100, 50, Math.PI*4/3, Math.PI*2/3, true); |
| |
g.lineTo(95, 100); |
| |
g.closePath(); |
| |
g.stroke(); |
| |
g.fill(); |
| |
} |
| |
</script> |
| |
</body> |
| |
</html> |
