HTML5学习（五）---Canvas（1）

Canvas绘图

Canvas起步

只要给它指定三个属性：id、width和height

<canvas idi="drawingCanvas" width="500" height="300"></canvas>

因为一开始canvas在页面显示空白的矩形，所有如果需要显现出来，可以识别边框或者背景。
先使用id取得对象，然后使用该对象的getContext()方法，取得二维绘图上下文。

var canvas = document.getElementById("drawingCanvas");

模板页面：

画直线

< canvas>坐标系：左上角是坐标原点

context.moveTo(10,10)
context.lineTo(400,40)
context.stroke();
context.strokeStyle = red;
context.strokeStyle = "rgb(205,40,40)";
context.lineCap = "butt";

路径与形状

填上颜色：先closePath()关闭路径，再把fillStyle设置为想要填充的颜色，再调用fill（）完成填充

曲线

• arc()
• artTo()
• bezierCurveTo()
• quadraticCurveTo()

变换

平移

context.tanslate(100,100)

注意：使用restore（）可以返回保存过的前一个状态，因此在使用该方法之前必须使用save（）

透明度

rgna()函数

globalAlpha属性设置上下文的透明度

画图程序

在画布上绘画

var canvas;
        var context
        window.onload = function(){
            var canvas = document.getElementById("drawingCanvas");
            var context = canvas.getContext("2d");

            canvas.onmousedown = startDrawing;
            canvas.onmouseup = stopDrawing;
            canvas.onmouseout = stopDrawing;
            canvas.onmousemove = draw;
        var isDrawing = false;
        function startDrawing(e){
            isDrawing = true;
            context.beginPath();
            context.moveTo(e.pageX-canvas.offsetLeft,e.pageY-canvas.offsetTop);
        }
        function draw(e){
            if(isDrawing==true){
                var x = e.pageX-canvas.offsetLeft;
                var y = e.pageY-canvas.offsetTop;
                cantext.lineTo(x,y);
                context.stroke();
            }
        }
        function stopDrawing(){
            isDrawing = false;
        }
        function clearCanvas() {
            context.clearRect(0,0,canvas.width,canvas.height);
        }

将画布保存为图像

使用数据URL
使用getImageData（）方法

var url = canvas.toDataURL("image/jpg");

浏览器的支持情况

高级Canvas绘图

绘制图像

绘图上下文提供了drawImage(),用于绘制图片。在调用该方法之前，要准备好图片对象。

var img = document.getElementById("img");
context.drawImage(img,10,10)

或者：
下面可以解决图像变形问题。

var img = new Image();
img.onload = function(){
	context.drawImage(img,0,0);
}
img.src = "photo.png"

裁剪、切割和伸缩

为图片准备一个30*30的方框，左上角在画布的坐标为（10，10）：

context.drawImage(img,10,10,30,30);

裁剪：

context.drawImage(img,source_x,source_y,source_width,source_height,x,y,width,height);

绘制文本

在绘制文本之前设置绘图上下文的font属性

context.font = "20px Arial";

然后调用fillText()方法绘制文本内容：

context.textBaseline="top";
context.fillStyle = "black";
context.fillText("Im stuck in a canvas.",10,10);

上面只能绘制一行，绘制多行要调用多次。

阴影与填充

添加阴影

阴影相关的属性：

创建各种阴影：

//绘制矩形阴影
context.rect(20,20,200,100);
context.fillStyle = red;
context.shasdowColor = black;
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fill();
//绘制星形阴影
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 4;
img = document.getElementById("star");
context.drawImage(img,250,30);
context.textBaseline = "top";
context.font = "bold,20px,Arial"

填充图案

var img = document.getElementById("img");
var pattern = context.createPattern(img,"repeat");
context.fillStyle = pattern;
context.rect(0,0,canvas.width,canvas.height);
context.fill();

填充渐变

var gradient = context.createLinearGradient(10,0,100,0);

gradient.addColorStop(0,"magenta");
gradient.addColorStop(1,"yellow");
drawHeart(60,50);
context.fillStyle = gradient;
context.fill();
context.stroke();