                        課程
                    
                        /前端開發
                        
                            /Html5
                        
                        /Canvas繪圖詳解

鼠標點擊在畫布上移動，隨鼠標軌跡周圍畫星星，呵呵

改了一下， ?鼠標點擊在畫布上移動，隨鼠標軌跡周圍畫星星。 ?呵呵

<!--?2015/03/12??-->
<!DOCTYPE?html>
<html>
<head?lang="en">
????<meta?charset="UTF-8">
????<title></title>
</head>
<body>
????<canvas?id="canvas"?width="1024"?height="1768"?style="border:?1px?solid?gray;?display:block;?margin:?50px?auto?auto;">
????????請更換更高級版本瀏覽器
?</canvas>
????<script>
???????window.onload?=?function?()?{
???????????var?canvas?=?document.getElementById("canvas");
?var?context?=?canvas.getContext("2d");
?var?inter;??//循環變量
?var?e;???//鼠標事件全局變量

?//鼠標按下
?canvas.onmousedown?=?function?(eve)?{
???????????????e?=?eve;
?inter?=?setInterval(function?()?{
???????????????????interFun(e);
?},50);
?}

???????????//鼠標移動時，改變全局的鼠標事件變量，供循環函數使用
?canvas.onmousemove?=?function?(eve)?{
???????????????e?=?eve;?//將鼠標移動事件變量賦值給全局
?}
???????????//當鼠標彈起時
?document.onmouseup?=?function?(e)?{
???????????????clearInterval(inter);
?}

???????????//循環函數
?function?interFun(e)?{
???????????????var?mouseX?=?e.clientX?+?document.body.scrollLeft?-?document.body.clientLeft?-?canvas.offsetLeft;
?var?mouseY?=?e.clientY?+?document.body.scrollTop??-?document.body.clientTop?-?canvas.offsetTop;
?console.log(mouseX);
?console.log(mouseY);
?context.beginPath();
?drawStar(context,?mouseX,?mouseY);
?context.closePath();
?context.fill();
?context.stroke();
?}
???????}

???????//將角度轉換為弧度
?function?toRadian(angle){
????????????return?Math.PI?*?angle?/?180;
?}

????????//隨機畫星星
?function?drawStar(ctx,?mouseX,?mouseY){
????????????var?starSize?=?new?Array(10,?50);???//控制星星大小范圍，半徑尺寸
?const?colors?=?["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000","#005588"];
?var?startAngle?=?Math.ceil(Math.random()?*?90);
?LR?=?Math.ceil(Math.random()?*?30?+?starSize[0]);
?SR?=?(Math.random()?*?0.1?+?0.4)?*?LR;
?var?randomNumA?=?Math.random()?*?151?-?75;
?var?randomNumB?=?Math.random()?*?151?-?75;
?starCenter_x?=?(mouseX?+?randomNumA)?||?Math.ceil(Math.random()?*?1024);
?starCenter_y?=?(mouseY?+?randomNumB)?||?Math.ceil(Math.random()?*?768);
?ctx.lineWidth?=?0.5?*?LR;

?for(var?i?=?0;?i?<?5;?i++){
????????????????lx?=?starCenter_x?+?Math.cos(toRadian(startAngle?+?72?*?i))?*?LR;
?ly?=?starCenter_y?-?Math.sin(toRadian(startAngle?+?72?*?i))?*?LR;
?if(i?==?0){
????????????????????ctx.moveTo(lx,?ly);
?}else{
????????????????????ctx.lineTo(lx,?ly);
?}
????????????????sx?=?starCenter_x?+?Math.cos(toRadian((startAngle?+?36)?+?72?*?i))?*?SR;
?sy?=?starCenter_y?-?Math.sin(toRadian((startAngle?+?36)?+?72?*?i))?*?SR;
?ctx.lineTo(sx,?sy);
?}

????????????ctx.strokeStyle?=?colors[Math.floor(Math.random()?*?11)];
?ctx.fillStyle?=?colors[Math.floor(Math.random()?*?11)];
?}
????</script>
</body>
</html>