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

来源：互联网发布：校园网网络规划与设计编辑：程序博客网时间：2024/05/16 11:52

/** * 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.onload=MyWorld();

0 0