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

Canvas 绘图

#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)}

}

您的浏览器不支持Canvas

//初始化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);

});