H5中有画布(Canvans), 可在使用JS在画布上面绘制图形:
//画制一个矩形
//先得到画布
var canvas
= document.
getElementById(
'lookwhatidrew');
//创建一个可以绘制2d图形的上下文
var context
= canvas.
getContext(
'2d');
//画制一个矩形
//图形填充颜色
context.fillStyle
= bgColor;
//绘制一个矩形
context.
fillRect(
0,
0,canvas.width,canvas.height);
//绘制一个圆形
//画一圆形
function
drawCirlce(
canvas,
context) {
var radius
=
Math.
floor(
Math.
random()
*
40);
var x
=
Math.
floor(
Math.
random()
*canvas.width);
var y
=
Math.
floor(
Math.
random()
*canvas.height);
//开始绘制
context.
beginPath();
//路径
context.
arc(x,y,radius,
0,
degreesToRadians(
360),
true);
//填充颜色
context.fillStyle
=
"lightblue";
//结束绘制
context.
fill();
}
// 通过角度计算弧度
function
degreesToRadians(
degrees) {
return (degrees
*
Math.
PI)
/
180;
}
context.
arc(x,y,radius, startAngle,endAngle,direcetion)
方法: x,y 是圆心;radius 是半径; direction: true逆时针创建圆,false 顺时针创建圆
startAngle:弧的起始角;
endAngle:弧的终止角
// 通过角度计算弧度
function
degreesToRadians(
degrees) {
return (degrees
*
Math.
PI)
/
180;
}
endAngle