千呼万唤 HTML 5 (11) - 画布（canvas）之效果（上）

Send_linux

介绍
HTML 5: 画布（canvas）之效果

填充色, 笔划色, 颜色值 | fillStyle, strokeStyle

剪裁 | clip()

渐变色 | createLinearGradient(), createRadialGradient(), CanvasGradient.addColorStop()

贴图的平铺模式 | createPattern()

阴影效果 | shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor

全局 Alpha | globalAlpha

新颜色与画布当前已有颜色的合成方式 | globalCompositeOperation

保存画布上下文，以及恢复画布上下文 | save(), restore()

像素操作 | createImageData(), getImageData(), putImageData(), ImageData, CanvasPixelArray

示例
1、填充色, 笔划色, 颜色值 | fillStyle, strokeStyle
canvas/effect/color.html



    填充色, 笔划色, 颜色值


     
        您的浏览器不支持 canvas 标签
     
   

    Demo
    清除画布
   
     
   
        var ctx = document.getElementById('canvas').getContext('2d');
   
        function drawIt() {
   
            clearIt();
   
            /*
             * context.fillStyle - 指定填充色的颜色值
             *
             * context.strokeStyle - 指定笔划色的颜色值
             *
             * 颜色值示例如下：
             *   Color Name - "green"
             *   #rgb - "#0f0"
             *   #rrggbb = "#00ff00"
             *   rgb(0-255, 0-255, 0-255) - rgb(0, 255, 0)
             *   rgb(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%) - rgb(0%, 100%, 0%)
             *   rgba(0-255, 0-255, 0-255, 0.0-1.0) - rgb(0, 255, 0, 1)
             *   rgba(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%, 0.0-1.0) - rgb(0%, 100%, 0%, 1)
             */
   
            ctx.fillStyle = 'Red';
            ctx.strokeStyle = 'Green';
            ctx.lineWidth = 10;
   
            // 看看 fillStyle 颜色的示例和 strokeStyle 颜色的示例，以及先 stroke 再 fill 和先 fill 再 stroke 的区别
            ctx.beginPath();
            ctx.rect(20, 20, 100, 100);
            ctx.stroke();
            ctx.fill();
   
            ctx.beginPath();
            ctx.rect(140, 20, 100, 100);
            ctx.fill();
            ctx.stroke();
        }
   
        function clearIt() {
            ctx.clearRect(0, 0, 260, 140);
        }
   
     

2、剪裁 | clip()
canvas/effect/clip.html



    剪裁


     
        您的浏览器不支持 canvas 标签
     
   

    Demo
    清除画布
   
     
   
        var ctx = document.getElementById('canvas').getContext('2d');
   
        function drawIt() {
   
            clearIt();
   
            var img = new Image();
   
            img.onload = function () {
                ctx.drawImage(img, 0, 0, 512, 512);
            }
   
            img.src = "http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png";
            // img.src = "http://www.cnblogs.com/assets/html5_logo.png";
   
            /*
             * context.clip() - 只显示当前路径所包围的剪切区域
             */
            ctx.beginPath();
            ctx.arc(256, 256, 100, 0, Math.PI * 2, true);
            ctx.clip();
        }
   
        function clearIt() {
            ctx.clearRect(0, 0, 512, 512);
        }
   
     

3、渐变色 | createLinearGradient(), createRadialGradient(), CanvasGradient.addColorStop()
canvas/effect/gradient.html



    渐变色


     
        您的浏览器不支持 canvas 标签
     
   

    Demo
    清除画布
   
     
   
        var ctx = document.getElementById('canvas').getContext('2d');
   
        function drawIt() {
   
            clearIt();
   
            /*
             * context.createLinearGradient(xStart, yStart, xEnd, yEnd) - 创建线性渐变对象，并返回 CanvasGradient 类型的对象
             *   xStart, yStart - 线性渐变对象的起始点坐标
             *   xEnd, yEnd - 线性渐变对象的结束点坐标
             *
             * CanvasGradient.addColorStop(offset, color) - 新增一个渐变参考点
             *   offset - 渐变参考点的位置，0.0 - 1.0 之间。起始点为 0，结束点为 1
             *   color - 渐变参考点的颜色值  
             */
            var linearGradient = ctx.createLinearGradient(50, 0, 50, 100);
            linearGradient.addColorStop(0, "red");
            linearGradient.addColorStop(0.5, "green");
            linearGradient.addColorStop(1, "blue");
   
            ctx.beginPath();
            ctx.arc(50, 50, 50, 0, 2 * Math.PI, true);
            ctx.fillStyle = linearGradient;
            ctx.fill();
   
   
            /*
             * context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd) - 创建放射性渐变对象，并返回 CanvasGradient  
             *   xStart, yStart - 放射性渐变对象的开始圆的圆心坐标
             *   radiusStart - 开始圆的半径
             *   xEnd, yEnd - 放射性渐变对象的结束圆的圆心坐标
             *   radiusEnd - 结束圆的半径
             */
            var radialGradient = ctx.createRadialGradient(150, 50, 0, 150, 50, 50);
            radialGradient.addColorStop(0, "red");
            radialGradient.addColorStop(0.5, "green");
            radialGradient.addColorStop(1, "blue");
   
            ctx.beginPath();
            ctx.arc(150, 50, 50, 0, 2 * Math.PI, true);
            ctx.fillStyle = radialGradient;
            ctx.fill();
        }
   
        function clearIt() {
            ctx.clearRect(0, 0, 200, 100);
        }
   
     

4、贴图的平铺模式 | createPattern()
canvas/effect/pattern.html

本文来自ChinaUnix文档频道，如果查看原文请点：http://doc.chinaunix.net/web/201208/2325448.shtml