js代碼：漸變圖形
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
canvas{border:0px;}
</style>
<script type="text/javascript">
function draw(){
var ctx = document.getElementById('my_canvas').getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 30);
ctx.lineTo(300, 30);
line_gra = ctx.createLinearGradient(20, 25, 20, 35);
line_gra.addColorStop(0, "#663300");
line_gra.addColorStop(0.5,"white");
line_gra.addColorStop(1, "#663300");
ctx.strokeStyle = line_gra;
ctx.lineWidth = 10;
ctx.stroke();
line_gra2 = ctx.createLinearGradient(400, 25, 400, 125);
line_gra2.addColorStop(0, "#3C0");
line_gra2.addColorStop(0.5, "white");
line_gra2.addColorStop(0.5, "#630");
line_gra2.addColorStop(1.0, "#9FF");
ctx.fillStyle = line_gra2;
ctx.fillRect(420, 25, 100, 100);
ctx.beginPath();
ctx.arc(600, 100, 70, 0, Math.PI*2, true);
line_gra3 = ctx.createLinearGradient(20, 30, 20, 170);
line_gra3.addColorStop(0, "#333");
line_gra3.addColorStop(1, "#DDD");
ctx.fillStyle = line_gra3;
ctx.fill();
ctx.beginPath();
ctx.arc(600, 100, 60, 0, Math.PI*2, true);
line_gra4 = ctx.createLinearGradient(20, 40, 20, 160);
line_gra4.addColorStop(0, "#DDD");
line_gra4.addColorStop(1, "#333");
ctx.fillStyle = line_gra4;
ctx.fill();
ctx.beginPath();
ctx.arc(50, 70, 30, 0, Math.PI*2, true);
rad_gra = ctx.createRadialGradient(40, 50, 3, 50, 70, 30);
rad_gra.addColorStop(0, "rgba(255,255,255,0.4)");
rad_gra.addColorStop(1, "#F90");
ctx.fillStyle = rad_gra;
ctx.fill();
ctx.beginPath();
ctx.arc(100, 100, 40, 0, Math.PI*2, true);
rad_gra2 = ctx.createRadialGradient(110, 110, 5, 100, 100, 40);
rad_gra2.addColorStop(0, "#9FF");
rad_gra2.addColorStop(0.95, "#33F");
rad_gra2.addColorStop(1, "rgba(51,51,255,0.2)");
ctx.fillStyle = rad_gra2;
ctx.fill();
ctx.beginPath();
ctx.arc(300,300,200,0,Math.PI,true);
ctx.lineTo(120, 300);
ctx.arc(300,300,150,Math.PI,0,false);
ctx.lineTo(475,300);
rad_gra3 = ctx.createRadialGradient(300,300,150,300,300,200);
rad_gra3.addColorStop(0,"rgba(255,0,0,0.1)");
rad_gra3.addColorStop(0.2,"rgba(255,255,0,0.7)");
rad_gra3.addColorStop(0.4,"rgba(255,0,0,0.6)");
rad_gra3.addColorStop(0.7,"rgba(51,200,255,0.6)");
rad_gra3.addColorStop(0.9,"rgba(255,218,0,0.6)");
rad_gra3.addColorStop(1,"rgba(255,218,0,0.2)");
ctx.fillStyle = rad_gra3;
ctx.fill();
}
</script>
</head>
<body>
<canvas id="my_canvas" width="700px" height="300px"></canvas>
<script>draw()</script>
</body>只能在firfox裏work 在IE中一片空白。。。
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
[轉載]慎用標籤 提交表單 [IE6無法提交表單][事件衝突]
我們都知道可以使用 [form].submit(); 來動態提交表單,但使用點擊<a/>標籤來提交表單, 會出現什麼情況呢?我們都知道, <a/>有個