千呼万唤 HTML 5 (8) - 画布（canvas）之绘制图形

Send_linux

介绍
HTML 5: 画布（canvas）之绘制图形

画布 Demo - 画布的基本概念及 Demo，canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURL()

在画布上绘制矩形 - canvas.getContext(), fillRect(), fillStyle, lineWidth, strokeStyle, strokeRect(), clearRect()

在画布上绘制弧线（以路径的方式）- beginPath(), arc(), fill(), stroke(), moveTo(), arcTo(), isPointInPath()

在画布上绘制曲线（以路径的方式）- quadraticCurveTo(), bezierCurveTo()

在画布上绘制直线（以路径的方式）- lineWidth, beginPath(), stroke(), moveTo(), lineTo(), lineCap, lineJoin, miterLimit, closePath()

在画布上绘制矩形（以路径的方式）- rect()

示例
1、画布 Demo | canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURL()
canvas/demo.html



    画布 Demo


     
        您的浏览器不支持 canvas 标签
     
     
    Demo
   
   

     
   
     
   
        var canvas = document.getElementById('canvas')
        if (canvas.getContext) {
            alert("您的浏览器支持 canvas 标签");
        } else {
            alert("您的浏览器不支持 canvas 标签");
        }
   
        /*
         * canvas 标签 - 画布标签
         *   getContext("2d") - 获取画布标签上的 2D 上下文对象（CanvasRenderingContext2D 对象）
         *   width - 画布的宽
         *   height - 画布的高
         *   canvas.toDataURL(type) - 返回画布数据，默认类型为 image/png
         *     type - 指定返回画布数据的类型，比如可以指定为 image/jpeg，默认类型为 image/png
         *
         * CanvasRenderingContext2D - 画布的 2D 上下文对象，其拥有多种绘制图像的方法
         *   canvas - 上下文所对应的画布
         */
   
        var ctx = canvas.getContext('2d');
        alert(ctx.canvas.id);
   
        function demo() {
   
            ctx.fillRect(20, 20, 100, 100);
   
            alert("width: " + canvas.width.toString());
            alert("height: " + canvas.height.toString());
   
            alert(canvas.toDataURL("image/jpeg"));
            alert(canvas.toDataURL()); // image/png
            document.getElementById("img").src = canvas.toDataURL();
   
        }
   
     

2、绘制矩形 | canvas.getContext(), fillRect(), fillStyle, lineWidth, strokeStyle, strokeRect(), clearRect()
canvas/shape/rectangle.html



    在 canvas 上绘制矩形的 demo


     
        您的浏览器不支持 canvas 标签
     
     
    在画布上绘制一些矩形
    清除画布
   
     
   
        var canvas = document.getElementById('canvas')
        if (canvas.getContext) {
            alert("您的浏览器支持 canvas 标签");
        } else {
            alert("您的浏览器不支持 canvas 标签");
        }
   
        /*
         * canvas.getContext("2d") - 获取画布标签上的 2D 上下文对象（HTML DOM CanvasRenderingContext2D 对象），其拥有多种绘制图像的方法。
         */
        var ctx = canvas.getContext('2d');
   
        function drawIt() {
   
            clearIt();
   
            /*
             * context.fillRect(x, y, w, h) - 绘制一个有填充色的矩形，默认填充色为 0x000000
             *   x - 矩形左上角的 x 坐标
             *   y - 矩形左上角的 y 坐标
             *   w - 矩形的宽
             *   h - 矩形的高
             */
            ctx.fillRect(0, 0, 100, 100);
   
            /*
             * context.fillStyle - 指定填充色的颜色值
             *
             * 颜色值示例如下：
             *   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 = "#0f0";
            ctx.fillRect(120, 0, 100, 50);
   
            /*
             * context.lineWidth - 笔划的宽度，默认值是 1.0。
             *    注意看本 Demo，笔划的宽度为 10，可以明显的看出其中心线为笔划的路径，画布外的图像不予显示
             * context.strokeStyle - 指定笔划的颜色值
             * context.strokeRect(x, y, w, h) - 绘制一个不填充的矩形
             *   x - 矩形左上角的 x 坐标
             *   y - 矩形左上角的 y 坐标
             *   w - 矩形的宽
             *   h - 矩形的高
             */
            ctx.lineWidth = 10;
            ctx.strokeStyle = "rgb(0, 0, 0)";
            ctx.strokeRect(0, 120, 100, 100);
   
            // 绘制一个填充色半透明的矩形
            ctx.fillStyle = "rgba(0, 255, 0, 0.3)";
            ctx.fillRect(0, 240, 100, 100);
        }
   
        function clearIt() {
            /*
             * context.clearRect(x, y, w, h) - 将指定的矩形区域上的图像全部清除
             */
            ctx.clearRect(0, 0, 300, 360);
   
            ctx.fillStyle = "Black";
            ctx.strokeStyle = "Black";
            ctx.lineWidth = 1;
        }
   
     

3、路径方式绘制 - 弧线 | beginPath(), arc(), fill(), stroke(), moveTo(), arcTo(), isPointInPath()
canvas/shape/path/arc.html

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