canvas画布创建

@[toc]

canvas简介

<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

创建画布

<canvas id="myCanvas" width="500" height="500">您的浏览器不支持canvas</canvas>
 
var myCanvas = document.getElementById('myCanvas');

画布本身是不具有绘制效果的，所以需要使用脚本语言操作绘制图形的api进行绘制操作，可以用getElementById()方式获取对象。

准备画笔

  var ctx = canvas.getContext('2d');

坐标和起点

context.moveTo(x,y);

绘制线条的方法

绘制一条从x,y的位置绘制一条直线到起点或上一个线头点

context.lineTo(x,y);

绘制路径

context.beginPath();/*开始路径*/ context.closePath();/*闭回路径*/

描边和填充

在canvas图形绘制中 ,路径只是草稿,真正绘制线必须执行stroke0方法根据路
径进行描边，还可以使用fill0方法进行图形的填充。

context.stroke();//描边 context.fill;//填充

canva绘制矩形和清除矩形

canvas中分别使用strokeRect0和fillRect0方法来绘制矩形边框和填充矩形。

context,strokeRect(x,y.width,height);
contet.illRect(x,y,width,height);

在canvas中还有一个相当于橡皮擦的方法，使用它可以清除矩形内绘制的内容。

context.clearRect(x，y，width,height);

绘制圆形

context.arc(x,y,radius,startAngle,endAngle,bAntiClockwise);

绘制图片

.canvas中的绘制图片其实就是把一幅图放在画布上。

//绘制原图
context.drawlmage(image, dx, dy))
//缩放绘图
context.drawlmage(image, dx, dy, dWidth, dHeight )
//切片绘图
context.drawlmage(image ,sx,Sy, sWidth,sHeigh ,dx,dy,dWidth,dHeight)

小例子

<html>
<head>
    <title>Canvas </title>
    <style type="text/css">
        canvas {
            border: 2px solid blue;
        }
    </style>
</head>
<canvas id="cvs" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
    function draw(){
        var canvas = document.getElementById('cvs');
        if(!canvas.getContext) return;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "rgb(200,0,0)";
        //绘制矩形
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
    }
    draw();
</script>
</html>