HTML用JS画图形

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