Html5 Canvas 系列_绘图三(H5 ，CSS3 动态八卦图)

最新推荐文章于 2024-07-13 20:45:54 发布

Java_攻城狮

最新推荐文章于 2024-07-13 20:45:54 发布

阅读量3.9k

点赞数 2

本文链接：https://blog.csdn.net/u014266877/article/details/54617803

版权

Web 同时被 3 个专栏收录

35 篇文章 0 订阅

订阅专栏

前端

16 篇文章 0 订阅

订阅专栏

html5

7 篇文章 0 订阅

订阅专栏

<!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>