HTML学习之canves元素

浏览数：17 / 时间：2015年06月09日

1：绘制画布和在画布上绘制矩形

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="canvas.js"></script>
</head>
<body onload="draw(‘canvas‘)">
<canvas id="canvas" width="500" height="350"></canvas>
</body>
</html>

function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext(‘2d‘);/*取得上下文*/
    context.fillStyle = "green";  /*绘制填充的颜色*/
    context.strokeStyle = "#f60";/* 设置边框颜色*/
    context.lineWidth = 5; /*设置画笔宽度*/

    context.fillRect(0,0,400,300);
    context.strokeRect(50,50,180,120);
    context.strokeRect(100,100,180,120);
}

2：绘制圆形

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas绘制圆形</title>
    <script type="text/javascript" src="canvas.js"></script>
</head>
<body onload="draw(‘canvas‘)">
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>

/**
 * Created by Administrator on 2015/3/29.
 */
function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext(‘2d‘);
    context.fillStyle = "#f1f2f3";
    context.fillRect(0,0,400,400);
  /* context.beginPath();
    context.arc(10,10,10,0,Math.PI*2,true);*//*代表从10 10 坐标绘制  从0度开始到360度*//*   *//*true 代表顺时针*//*
    context.closePath();  *//*关闭上下文对象*//*

    context.fillStyle= "rgba(255,0,0,0,0.25)";
    context.fill();*/

    for(var i=0 ;i<10;i++)
    {
        context.beginPath();
        context.arc(10+i*25,10+i*25,10+i*10,10,0,Math.PI*2,true);/*代表从10 10 坐标绘制  从0度开始到360度   *true 代表顺时针*/
        context.closePath(); /*关闭上下文对象*/

        context.fillStyle= "rgba(255,0,0,0.25)";
        context.fill();
    }

}

3：绘制文字

/**
 * Created by Administrator on 2015/3/29.
 */
function draw(id)
{
    var canvas = document.getElementById(id);
    var context = canvas.getContext(‘2d‘);
    context.fillStyle =‘green‘;
    context.fillRect(0,0,800,300);
    context.fillStyle=‘#fff‘;
    context.strokeStyle =‘#fff‘;
    context.font = "bold 100px ‘微软雅黑‘,‘宋体‘";
    context.fillText(‘God is a girl！‘,50,150);
    context.strokeText(‘God is a girl！‘,61,160);
    window.location = canvas.toDataURL(‘image/png‘);

}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="canvas.js"></script>
</head>
<body onload="draw(‘canvas‘)">
<canvas id="canvas" width="800" height="300"></canvas>

</body>
</html>

4：绘制动画

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="canves.js"></script>
</head>
<body onload="draw(‘canves‘)">
<canvas id="canves" width="400" height="400"> </canvas>
</body>
</html>

/**
 * Created by Administrator on 2015/3/29.
 */
var i;
function draw(id){
    var  canves = document.getElementById(id);
     context = canves.getContext(‘2d‘);
    setInterval(painting,100);
    i=0;
}
function painting(){
   /* context.fillStyle= ‘green‘;
    context.fillRect(i,0,10,10);
    i=i+20;*/

    context.fillStyle ="green";
    context.fillRect(0,0,400,400);
    context.fillStyle="red";
    context.clearRect(i,0,10,10);
    i=i+10;
}