[学习笔记]JavaScript基础--图形绘制

/**
 * Created by Administrator on 2015/11/17.
 */
var MyWorld = function()
{
    console.log("我的世界");

    var canvas = document.getElementById("my_canvas");
    canvas.width=1500;
    canvas.height=1400;
    var context=canvas.getContext("2d");

    drawCanvas(context);
}

var drawCanvas = function(ctx)
{
    //矩形绘制
    ctx.fillStyle=" #FF0000";
    //参数:X坐标，Y坐标，宽，高
    ctx.fillRect(50,50,100,100);

    //矩形边框绘制
    //参数:X坐标，Y坐标，宽，高
    ctx.strokeStyle="#FF0000";
    ctx.strokeRect(150,100,200,200);

    //圆的绘制
    //参数:X坐标，Y坐标，圆周半径，起始弧度，结束弧度，圆绘制方向bool值
    ctx.arc(500,100,100,(Math.PI/180)*0,(Math.PI/180)*360,true);
    ctx.fill();//圆的填充

    //线的绘制
    ctx.fillStyle = "ff489a";
    ctx.LineWidth = 5;
    ctx.beginPath();//标识开始绘制
    ctx.moveTo(100,100);//从（0，0）坐标（X，Y）坐标点，画线
    ctx.lineTo(0,100);
    ctx.stroke();//线的填充
    ctx.closePath();//标识结束绘制
}

window.οnlοad=MyWorld();