HTML5之canvas

canvas的创建，canvas图片的绘制及图片的封装，矩形，矩形边框，圆，线的绘制。

JavaScript代码如下：main.js

/**
 * Created by zengkm on 15-9-1.
 */
    //初始化
var myworld=function(){
    console.log("输出一些东西");
    var canvas = document.getElementById("my_canvas");
    canvas.width="800";
    canvas.height="400";
    var context =canvas.getContext("2d");
    drawCanvas(context);

    for(var i=0;i<4;i++)
    {
        drawImg(context,"res/heh.png",200*i,50);
    }

}
//在canvas上绘图
var drawCanvas = function(ctx){
    //矩形绘制
    //参数：X坐标，Y坐标，宽，高
    ctx.fillStyle="#FFCC00";
    ctx.fillRect(200,150,100,100);

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

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

    //线的绘制
    ctx.fillStyle ="ff89a";
    ctx.linePath =5;
    ctx.beginPath();//标识开始绘制
    ctx.moveTo(700,200);
    ctx.lineTo(600,200);
    ctx.stroke();//线的填充绘制
    ctx.closePath();//关闭绘制

}
//canvas图片绘制
var drawImg = function(ctx,srcurl,x,y){
    var img = new Image();
    img.src =srcurl;
    img.onload = function(){

        //参数：img对象，X坐标，Y坐标
        ctx.drawImage(img,x,y);
    }
}
window.onload = myworld();

HTML代码：index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas实现</title>
</head>
<body>
<canvas id="my_canvas" style="background-color: green" width="400" height="200"></canvas>
<script style="text/javascript" src="src/main.js"></script>
</body>
</html>

最终实现的效果，画布颜色为绿色，第一行循环绘制图片4张，第二行画圆，矩形，矩形边框，线。

posted on 2015-09-01 20:55  yuliann  阅读(212)  评论(0)  编辑  收藏  举报

导航