canvas-基础

创建canvas元素

1.html5标签创建

<canvas id="mycanvas" width="500px" height="500px"></canvas>

必须指定ID，width，height属性

 

2.js方法创建

window.onload=function () {
    document.body.innerHTML="<canvas id="mycanvas" width="200px" height="200px" ></canvas>";
}

绘制矩形

canvas元素绘制图形步骤

1.取得canvas元素

2.取得上下文

     一个封装了很多了绘图功能的对象

3.填充与绘制边框

     fill：填满图形内部；

     stroke：不填满图形内部，只绘制图形外框

4.设定绘图样式

     并不局限与颜色

     fillStyle；strokeStyle

5.指定线宽

<divstyle="font-family: 楷体; font-size: 14px;" >

6.指定颜色值

7.绘制

//canvas画布背景为浅蓝色；绘制红色正方形；边款为蓝色
function drawRect(id) {
    var canvas=document.getElementById(id);
    if(canvas==null){
        return fasle;
    }
    var context=canvas.getContext('2d');
    context.fillStyle="#eeeeff";
    context.fillRect(0,0,400,300);
    context.fillStyle="red";
    context.strokeStyle="blue";
    context.lineWidth=1;
    context.fillRect(50,50,100,100);
    context.strokeRect(50,50,100,100);
}