h5学习-canvas绘制矩形、圆形、文字、动画

绘制矩形
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas绘制矩形</title>
    <script type="text/javascript" src="canvas.js"></script>
    <style type="text/css">//让矩形显示置顶
        body{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body onload="draw('canvas');">
<canvas id = "canvas" width="500" height="350"></canvas>
</body>
</html>

//canvas.js
function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    context.fillStyle = "#000";
    context.strokeStyle = "#f60";
    context.lineWidth = 5;
    context.fillRect(0,0,500,350);
    context.strokeRect(50,50,180,120);

}

绘制一个矩形：

1。获取canvas元素 getElementById()

2。取得上下文 getContext（）

3。填充与绘制边框 fill() stroke()

4。设置绘制样式 fillStyle stokeStyle 属性

5。指定画笔宽度 getcontext().linewidth

6。设置颜色值 通过第4步的属性来设置

7。绘制矩形 context.fillRect(x,y,width,height)

context.strokeRect(x,y,width,height)

 绘制圆形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas绘制圆形</title>
    <script type="text/javascript" src="canvas.js"></script>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body onload="draw('canvas');">
<canvas id = "canvas" width="500" height="500"></canvas>
</body>
</html>

function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    context.fillStyle = "#f1f2f3";
    context.fillRect(0,0,500,500);//背景的绘制

    for(var i = 0;i<10;i++){
        context.beginPath();
        context.arc(25*i,25*i,10*i,0,Math.PI*2,true);
        context.closePath();
        context.fillStyle = "rgba(255,0,0,0.25)";
        context.fill();
    }


}
效果图;
绘制一个圆形：
1。创建开始路径，context.beginPath()
2.创建图形路径，context.arc(x,y,radius,starAngle,endAngle,anticlockwise);
var radius = degress*Math.PI/180, Math.PI=180度
anticlockwise 是否顺时针
3.创建完成关闭路径，context.clasePath()
4。设置绘制样式然后调用绘制方法进行绘制，context.filllStyle = 'rgba(255,0,0,0.25)';context.fill();
 
 
绘制文字：

function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    context.fillStyle = "#a0f";
    context.fillRect(0,0,800,300);//背景的绘制


    context.fillStyle = "#fff";//文字的颜色
    context.strokeStyle = "#fff";

    context.fillText("小柠檬呢",50,50);
    context.strokeText("小小的柠檬",50,100);
绘制动画

var i;
function draw(id){
    var canvas = document.getElementById(id);
    context = canvas.getContext('2d');
    setInterval(painting,100);//设置动画的间隔时间。第一个参数表示执行动画的函数，第二个函数 间隔时间
    //通过不断地变化xy坐标来实现动画效果。clearRect(),将画布整体或者局部擦除。
    i=0;
}


function painting(){
    context.fillStyle = "#f00";
    context.fillRect(i,0,10,10);
    i=i+20;
}
 