Panda's blog

HTML 5 Canvas 繪製星星

利用html 5 cancas語法，繪製星星圖案，並加上外框、漸層與陰影，除IE6, IE7, IE8不支援外，Chrome 5, Firefox 3.6, Opera 10.6, Safari 5, IE9都支援HTML 5 Canvas。

實際顯示：

原始碼：

<canvas id="Canvas" width="350" height="250" style="border:0px solid #c3c3c3;background-color:#FFF;">
您的瀏覽器不支援HTML 5 Canvas
</canvas>


<script type="text/javascript">

var c=document.getElementById("Canvas");
var context=c.getContext("2d");
var grd=context.createLinearGradient(100,100,250,250);grd.addColorStop(0,"#06F");
grd.addColorStop(0.3,"#F00");
grd.addColorStop(0.5,"#FF0");

context.fillStyle = grd;
context.strokeStyle = '#333';
context.lineWidth = 2;

context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur    = 100;
context.shadowColor   = '#000';

context.moveTo(100,100);
context.lineTo(244,100);
context.lineTo(130,177);
context.lineTo(170,50);
context.lineTo(220,177);
context.lineTo(100,100);

context.stroke();
context.fill();
context.shadow();

</script>

參考資料：

http://onepixelahead.com/2010/10/14/html5-canvas-complex-shapes/

http://dev.opera.com/articles/view/html-5-canvas-the-basics/

http://www.w3school.com.cn/html5/html_5_canvas.asp

http://diveintohtml5.org/canvas.html