Html5 Canvas 系列_繪圖三(H5 ，CSS3 動態八卦圖)

原創

2020-02-20 15:30

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title> Canvas 繪圖</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="cloud">
  <meta name="Keywords" content="H5 Canvas 繪圖">
  <meta name="Description" content="使用Html5 Canvas 繪製圖形 八卦圖">
 </head>

	<style type="text/css">
		#canvas{
			display:block;
			margin: 125px auto;
			animation: rotate 3s linear 0s infinite normal;
            -webkit-animation: rotate 3s linear 0s infinite normal;
            -moz-animation: rotate 3s linear 0s infinite normal;
            -ms-animation: rotate 3s linear 0s infinite normal;
            -o-animation: rotate 3s linear 0s infinite normal;
		}
		@-webkit-keyframes rotate{
            from{-webkit-transform:rotate(0deg)}
            to{-webkit-transform:rotate(360deg)}
        }
        @-moz-keyframes rotate{
            from{-webkit-transform:rotate(0deg)}
            to{-webkit-transform:rotate(360deg)}
        }
        @-ms-keyframes rotate{
            from{-webkit-transform:rotate(0deg)}
            to{-webkit-transform:rotate(360deg)}
        }
        @-o-keyframes rotate{
            from{-webkit-transform:rotate(0deg)}
            to{-webkit-transform:rotate(360deg)}
        }
	</style>

 <body>
	<canvas id="canvas">
			您的瀏覽器不支持Canvas
	</canvas>
 </body>

<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
	//	初始化Canvas
	function init_canvas(canvas_id){		
		var canvas = document.getElementById("canvas");
		canvas.width = 500;
		canvas.height = 500;
		return canvas.getContext("2d");
	}
	
	// 八卦圖
    function ph1(context){
        //初始化參數
        var c_white = "white";
        var c_black = "black";
        //繪製座標數組
        var x_y_arr = [ [250, 350], [30, 0], [250, 150], [100, 0], [250, 250] ];
        var r = Math.PI * 2;
        //1.先繪製一個完整的空心圓
        context.beginPath();
        context.arc(x_y_arr[4][0], x_y_arr[4][1], 200, 0, r);
        context.stroke();
        //2.繪製半黑半白  默認爲黑色
        context.beginPath();
        context.arc(x_y_arr[4][0], x_y_arr[4][1], 200, Math.PI*3/2, Math.PI/2, true);
        context.fill();
        //3.繪製一黑一白兩個半圓
        context.fillStyle = c_white;
        context.beginPath();
        context.arc(x_y_arr[2][0], x_y_arr[2][1], x_y_arr[3][0], x_y_arr[3][1], r);
        context.fill();

        context.fillStyle = c_black;
        context.beginPath();
        context.arc(x_y_arr[0][0], x_y_arr[0][1], x_y_arr[3][0], x_y_arr[3][1], r);
        context.fill();
        //4.繪製兩個小圓
        context.fillStyle = c_black;
        context.beginPath();
        context.arc(x_y_arr[2][0], x_y_arr[2][1], x_y_arr[1][0], x_y_arr[1][1], r);
        context.fill();
         
        context.fillStyle = c_white;
        context.beginPath();
        context.arc(x_y_arr[0][0], x_y_arr[0][1], x_y_arr[1][0], x_y_arr[1][1], r);
        context.fill();
    }

	$(function(){
		var context = init_canvas("canvas");
		ph1(context);
	});
</script>
</html>