【HTML5】HTML5 高级程序设计 学习笔记2 canvas

案例：
1.1 绘制一条线:

<script type="text/javascript">
function drawDiag(){
    var canvas=document.getElementById("diag");
    var context=canvas.getContext("2d");

    //保存当前的绘图状态
    context.save();
    //向右下方移动
    context.translate(70,140);
    //依原点为起点
    context.beginPath();//开始
    context.moveTo(0,0);
    context.lineTo(70,-70);
    //绘制在画布上
    context.stroke();
    //恢复原来的绘图状态
    context.restore();
}
    window.addEventListener("load",drawDiag,true);
    //是否支持canvas 
    try {
        document.createElement("canvas").getContext("2d");
        document.getElementById("support").innerHTML ="HTML5 Canvas is supported in your browse";
    } catch (e) {
        document.getElementById("support").innerHTML = 
        "HTML5 Canvas is not supported in your browser.";
}
</script>

1.2 绘制一棵树

function createCanopyPath(context) {
    // Draw the tree canopy
    context.beginPath();
    context.moveTo(-25, -50);
    context.lineTo(-10, -80);
    context.lineTo(-20, -80);
    context.lineTo(-5, -110);
    context.lineTo(-15, -110);
    // Top of the tree
    context.lineTo(0, -140);
    context.lineTo(15, -110);
    context.lineTo(5, -110);
    context.lineTo(20, -80);
    context.lineTo(10, -80);
    context.lineTo(25, -50);
    // Close the path back to its start point
    context.closePath();//链接起点，闭合路径
}
function drawTrails() {
    var canvas = document.getElementById('trails');
    var context = canvas.getContext('2d');
    /*************************************/
    /*修改样式*/
    context.lineWidth=4;//线条
    context.lineJoin='round';
    context.strokeStyle='#663300';
    //填充样式
    context.fillStyle='#339900';

    /************************************/
    context.save();
    context.translate(130, 150);
    // Create the shape for our canopy path
    createCanopyPath(context);
    //绘制矩形作为树干
    context.fillRect(-5,-50,10,50);
    //context.fill();  //1.放到这里可以看到边界的宽度
    // Stroke the current path
    context.stroke();
    context.fill();  //2.放到这里可以看不到边界的宽度
    context.restore();
}
    window.addEventListener("load",drawTrails,true);

</script>

1.3 绘制曲线，添加图片

context.save();
            context.translate(-10, 350);
            context.beginPath();
            context.moveTo(0, 0);
            context.quadraticCurveTo(170, -50, 260, -190);
            context.quadraticCurveTo(310, -250, 410,-250);
            context.strokeStyle = '#663300';
            context.lineWidth = 20;
            context.stroke();
            context.restore();
// Load the bark image
var bark = new Image();
bark.src = "bark.jpg";
// Once the image is loaded, draw on the canvas
bark.onload = function () {
    drawTrails();
}

// Draw the bark pattern image where
// the filled rectangle was before
context.drawImage(bark, -5, -50, 10, 50);

渐变 背景图

       var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);
            trunkGradient.addColorStop(0, '#663300');
            trunkGradient.addColorStop(0.4, '#996600');
            trunkGradient.addColorStop(1, '#552200');
            context.fillStyle = trunkGradient;
            context.fillRect(-5, -50, 10, 50);
context.strokeStyle = context.createPattern(gravel, 'repeat');  //gravel是图片

缩放:

context.scale(2, 2);//

旋转

context.save();
context.rotate(1.57);//旋转角度参数以弧度为单位
context.drawImage(myImage,0,0,100,100);
context.restore();

文本 应用阴影:

            context.save();
            context.font = "60px impact";
            context.fillStyle = '#996600'
            context.textAlign = 'center';
            // Set some shadow on our text, black with 20% alpha
            context.shadowColor = 'rgba(0, 0, 0, 0.2)';
            // Move the shadow to the right 15 pixels, up 10
            context.shadowOffsetX = 15;
            context.shadowOffsetY = -10;
            // Blur the shadow slightly
            context.shadowBlur = 2;
            context.fillText('Happy Trails!', 200, 60, 400);
            context.restore();

点击位置

canvas.onmousemove = function(e) {
            x = e.clientX - e.target.offsetLeft;
            y = e.clientY - e.target.offsetTop;
            addToPoint(x,y)
        }

像素数据
三个函数：

• context.getImageData(sx,sy,sw,sh)
  
  getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
  对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：
  R - 红色 (0-255)
  G - 绿色 (0-255)
  B - 蓝色 (0-255)
  A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)
  color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中。
  提示：在操作完成数组中的 color/alpha 信息之后，您可以使用 putImageData() 方法将图像数据拷贝回画布上。
  例子：
  以下代码可获得被返回的 ImageData 对象中第一个像素的 color/alpha 信息：

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

• context.putImageData(imagedata, dx, dy).

• context.createImageData(sw, sh)

一个例子：

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(10,10,50,50);
function copy()
{
    var imgData=ctx.getImageData(10,10,50,50);
    ctx.putImageData(imgData,10,70);
}
</script>
<button onclick="copy()">复制</button>
</body>
</html>

参考内容：

http://www.w3school.com.cn/tags/html_ref_canvas.asp