`
yangshen998
  • 浏览: 1288764 次
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

介绍
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

<!DOCTYPE HTML>
<html>
<head>
    <title>填充色, 笔划色, 颜色值</title>
</head>
<body>
    <canvas id="canvas" width="260" height="140" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        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);
        }

    </script>
</body>
</html>
复制代码


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

<!DOCTYPE HTML>
<html>
<head>
    <title>剪裁</title>
</head>
<body>
    <canvas id="canvas" width="512" height="512" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        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);
        }

    </script>
</body>
</html>
复制代码


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

<!DOCTYPE HTML>
<html>
<head>
    <title>渐变色</title>
</head>
<body>
    <canvas id="canvas" width="200" height="100" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        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);
        }

    </script>
</body>
</html>
复制代码


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

<!DOCTYPE HTML>
<html>
<head>
    <title>贴图的平铺模式</title>
</head>
<body>
    <canvas id="canvas" width="620" height="620" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

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

        function drawIt() {

            clearIt();

            var img = new Image();
            img.onload = function () {

                /*
                 * context.createPattern(image, repetitionStyle) - 指定贴图的平铺模式
                 *   image - 图像对象。除了支持 HTMLImageElement 外，还支持 HTMLCanvasElement 和 HTMLVideoElement
                 *   repetitionStyle - 平铺模式（无论任何平铺模式，首图均在画布的左上角）
                 *     no-repeat - 不平铺，只贴图一次，当然也是在画布的左上角
                 *     repeat-x - x 轴方向上平铺图片
                 *     repeat-y - y 轴方向上平铺图片
                 *     repeat - x 轴和 y 轴方向均平铺图片
                 */

                var pattern = ctx.createPattern(img, "no-repeat");
                ctx.fillStyle = pattern;
                ctx.strokeStyle = "blue";
                ctx.beginPath();
                ctx.rect(0, 0, 300, 300);
                ctx.fill();
                ctx.stroke();

                pattern = ctx.createPattern(img, "repeat-x");
                ctx.fillStyle = pattern;
                ctx.strokeStyle = "blue";
                ctx.beginPath();
                ctx.rect(320, 0, 300, 300);
                ctx.fill();
                ctx.stroke();

                pattern = ctx.createPattern(img, "repeat-y");
                ctx.fillStyle = pattern;
                ctx.strokeStyle = "blue";
                ctx.beginPath();
                ctx.rect(0, 320, 300, 300);
                ctx.fill();
                ctx.stroke();

                pattern = ctx.createPattern(img, "repeat");
                ctx.fillStyle = pattern;
                ctx.strokeStyle = "blue";
                ctx.beginPath();
                ctx.rect(320, 320, 300, 300);
                ctx.fill();
                ctx.stroke();
            }

            img.src = "http://res2.windows.microsoft.com/resbox/en/Windows%207/main/4300ae64-546c-4bbe-9026-6779b3684fb9_0.png";
            // img.src = "http://www.cnblogs.com/assets/windows_logo.png";
        }

        function clearIt() {
            ctx.clearRect(0, 0, 620, 620);
        }

    </script>
</body>
</html>
复制代码


5、阴影效果 | shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
canvas/effect/shadow.html

<!DOCTYPE HTML>
<html>
<head>
    <title>阴影效果</title>
</head>
<body>
    <canvas id="canvas" width="480" height="480" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

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

        function drawIt() {

            clearIt();

            /*
             * context.shadowOffsetX - 阴影相对于实体的水平偏移值
             * context.shadowOffsetY - 阴影相对于实体的垂直偏移值
             * context.shadowBlur - 阴影模糊程度。默认值是 0 ，即不模糊
             * context.shadowColor - 阴影的颜色
             */

            ctx.shadowOffsetX = 5;
            ctx.shadowOffsetY = 10;
            ctx.shadowBlur = 10;
            ctx.shadowColor = "rgba(0, 0, 255, 0.5)";

            ctx.beginPath();
            ctx.arc(120, 120, 100, 0, Math.PI * 2, true);
            ctx.stroke();

            ctx.fillRect(300, 300, 100, 100);
        }

        function clearIt() {
            ctx.clearRect(0, 0, 480, 480);
        }

    </script>
</body>
</html>
复制代码


6、全局 Alpha | globalAlpha
canvas/effect/globalAlpha.html

<!DOCTYPE HTML>
<html>
<head>
    <title>全局 Alpha</title>
</head>
<body>
    <canvas id="canvas" width="140" height="140" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

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

        function drawIt() {

            clearIt();

            /*
             * context.globalAlpha - 设置全局的 alpha 值
             */
            ctx.globalAlpha = "0.5";

            ctx.fillStyle = "red";
            ctx.beginPath();
            ctx.rect(20, 20, 100, 100);
            ctx.fill();
        }

        function clearIt() {
            ctx.clearRect(0, 0, 140, 140);
        }

    </script>
</body>
</html>
复制代码


7、新颜色与画布当前已有颜色的合成方式 | globalCompositeOperation
canvas/effect/globalCompositeOperation.html

<!DOCTYPE HTML>
<html>
<head>
    <title>新颜色与画布当前已有颜色的合成方式</title>
</head>
<body>
    <div id="msg"></div>

    <canvas id="canvas" width="200" height="200" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">改变 globalCompositeOperation</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

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

        var compositeOperationTypes = ['source-atop', 'source-in', 'source-out', 'source-over', 'destination-atop', 'destination-in', 'destination-out', 'destination-over', 'lighter', 'copy', 'xor'];
        var index = 0;

        function drawIt() {

            clearIt();

            ctx.fillStyle = "red";
            ctx.beginPath();
            ctx.rect(20, 20, 100, 100);
            ctx.fill();

            /*
             * context.globalCompositeOperation - 设置新颜色与画布当前已有颜色的合成方式
             *   source-atop - 保留已有颜色，然后绘制新颜色与已有颜色重合的部分
             *   source-in - 绘制新颜色与已有颜色重合的部分，其余全透明
             *   source-out - 绘制新颜色与已有颜色不重合的部分，其余全透明
             *   source-over - 在已有颜色的前面绘制新颜色。默认值
             *   destination-atop - 在已有颜色的后面绘制新颜色，然后保留已有颜色与新颜色重合的部分
             *   destination-in - 保留已有颜色与新颜色重合的部分，其余全透明
             *   destination-out - 保留已有颜色与新颜色不重合的部分，其余全透明
             *   destination-over - 在已有颜色的后面绘制新颜色
             *   lighter - 混合重叠部分的颜色
             *   copy - 删除已有颜色，只绘制新颜色
             *   xor - 透明化重叠部分的颜色
             */
            ctx.globalCompositeOperation = compositeOperationTypes[index];
            document.getElementById("msg").innerHTML = ctx.globalCompositeOperation;

            ctx.fillStyle = "blue";
            ctx.beginPath();
            ctx.rect(80, 80, 100, 100);
            ctx.fill();

            index++;
            if (index >= compositeOperationTypes.length)
                index = 0;
        }

        function clearIt() {
            ctx.clearRect(0, 0, 200, 200);

            // source-over 是 context.globalCompositeOperation 的默认值
            ctx.globalCompositeOperation = "source-over";
        }

    </script>
</body>
</html>
复制代码


8、保存画布上下文，以及恢复画布上下文 | save(), restore()
canvas/effect/save_restore.html

<!DOCTYPE HTML>
<html>
<head>
    <title>保存画布上下文，以及恢复画布上下文</title>
</head>
<body>
    <div>单击“save and draw”一次，然后单击“restore and draw”三次</div>

    <canvas id="canvas" width="280" height="140" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">save and draw</button>
    <button type="button" onclick="restoreIt();">restore and draw</button>

    <script type="text/javascript">

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

        /*
         * save() - 将画布的上下文压入堆栈
         * restore() - 从堆栈中取一个画布的上下文，如果没有则什么都不做
         */

        function drawIt() {
            clearIt();

            ctx.strokeStyle = "red";
            ctx.fillStyle = "green";
            ctx.lineWidth = 5;
            ctx.save(); // 将画布的上下文压入堆栈，此时堆栈中有一个画布上下文

            drawRect1();

            ctx.strokeStyle = "blue";
            ctx.fillStyle = "yellow";
            ctx.lineWidth = 10;
            ctx.save(); // 将画布的上下文压入堆栈，此时堆栈中有两个画布上下文

            drawRect2();
        }

        function restoreIt() {
            clearIt();

            ctx.restore(); // 按后进先出的顺序从堆栈里取画布上下文，如果取不到则什么都不做

            drawRect1();
            drawRect2();
        }

        function drawRect1() {
            ctx.beginPath();
            ctx.rect(20, 20, 100, 100);
            ctx.stroke();
            ctx.fill();
        }

        function drawRect2() {
            ctx.beginPath();
            ctx.rect(140, 20, 100, 100);
            ctx.stroke();
            ctx.fill();
        }

        function clearIt() {
            ctx.clearRect(0, 0, 280, 140);

            ctx.strokeStyle = "black";
            ctx.fillStyle = "black";
            ctx.lineWidth = 1;
        }
    </script>
</body>
</html>
复制代码


9、像素操作 | createImageData(), getImageData(), putImageData(), ImageData, CanvasPixelArray
canvas/effect/imageData.html

<!DOCTYPE HTML>
<html>
<head>
    <title>像素操作</title>
</head>
<body>
    <div id="msg"></div>

    <canvas id="canvas" width="300" height="300" style="background-color: black">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <br /><br />

    <canvas id="canvas2" width="300" height="300" style="background-color: black">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="syncIt();">同步第一个Demo</button>
    <button type="button" onclick="redIt();">变红</button>

    <script type="text/javascript">

        var canvas = document.getElementById('canvas');
        var canvas2 = document.getElementById('canvas2');

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

        var timer = -1;

        var width = parseInt(canvas.width, 10);
        var height = parseInt(canvas.height, 10);

        function drawIt() {
            
            clearIt();

            /*
             * context.createImageData(width, height) - 按指定的宽和高创建并返回 ImageData 对象，其内所有像素的默认值为 rgba(0,0,0,0)
             *
             * context.createImageData(imageData) - 按指定的 ImageData 对象的宽和高创建一个新的 ImageData 对象并返回此对象，其内所有像素的默认值为 rgba(0,0,0,0)
             *   相当于 context.createImageData(imageData.width, imageData.height)
             *
             * context.getImageData(x, y, width, height) - 获取画布的指定范围内的 ImageData 对象，并返回此对象
             *   x - 需要获取的 ImageData 对象矩形框相对于画布的左上角的 x 坐标
             *   y - 需要获取的 ImageData 对象矩形框相对于画布的左上角的 y 坐标
             *   width - 需要获取的 ImageData 对象矩形框的宽
             *   height - 需要获取的 ImageData 对象矩形框的高
             *
             * putImageData(imagedata, x, y, [dirtyX, dirtyY, dirtyWidth, dirtyHeight]) - 在画布上写入指定的数据
             *   imagedata - 需要写入的 ImageData 对象
             *   x, y - 指定需要写入的 ImageData 对象矩形框相对于画布左上角的坐标
             *   [dirtyX, dirtyY, dirtyWidth, dirtyHeight] - 显示 ImageData 对象上指定范围内像素
             */

            /*
             * ImageData - 像素对象
             *   width - 像素对象的宽
             *   height - 像素对象的高
             *   data - 像素数据，CanvasPixelArray 类型的对象
             *
             * CanvasPixelArray - 像素数据对象，可以数组方式进行操作
             *   数组中每 4 个元素代表一个像素，每个元素为一个字节，4 个元素按照 rgba 的方式描述一个像素
             *   length - 元素总数，即像素总数 * 4
             */

            var imageData = ctx.createImageData(width, height);
            document.getElementById("msg").innerHTML = "CanvasPixelArray.length: " + imageData.data.length;

            // 随机生成颜色不一样的像素，并写入到画布上
            timer = setInterval(randomPixel, 1);
            function randomPixel() {
                var x = parseInt(Math.random() * width, 10);
                var y = parseInt(Math.random() * height, 10);

                var index = (y * width + x) * 4;

                imageData.data[index + 0] = parseInt(Math.random() * 256);
                imageData.data[index + 1] = parseInt(Math.random() * 256);
                imageData.data[index + 2] = parseInt(Math.random() * 256);
                imageData.data[index + 3] = parseInt(Math.random() * 256);

                ctx.putImageData(imageData, 50, 50, 0, 0, 200, 200);
            }
        }

        function clearIt() {
            clearInterval(timer);
            ctx.clearRect(0, 0, width, height);
        }

        // 将 canvas 上的像素数据复制到 canvas2 上
function syncIt() {
            var imageData = ctx.getImageData(0, 0, width, height);
            ctx2.putImageData(imageData, 0, 0);
        }

        // 将 canvas2 上的非 rgba(0,0,0,0) 的点都变成红色
function redIt() {
            var imageData = ctx2.getImageData(0, 0, width, height);

            for (var i = 1; i < imageData.data.length / 4; i++) {
                var index = i * 4;

                if (imageData.data[index + 0] + imageData.data[index + 1] + imageData.data[index + 2] + imageData.data[index + 3] > 0) {
                    imageData.data[index + 0] = 255;
                    imageData.data[index + 1] = 0;
                    imageData.data[index + 2] = 0;
                    imageData.data[index + 3] = 255;
                }
            }

            ctx2.putImageData(imageData, 0, 0);
        }

    </script>
</body>
</html>
0
顶
1
踩
分享到：
| WebGis设计界面
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    QML--Canvas画布实现矩形圆形等圈定

    Canvas组件的核心是它的`绘画上下文`（Painting Context），这个上下文提供了多种绘图方法，如`fillRect()`、`strokeRect()`、`drawCircle()`等，用于在画布上填充或描边各种形状。在QML中，你可以通过JavaScript...

    html5个人作业-画布canvas

    html5个人练习用网页，包含各种基础模块，&lt;audio&gt; 定义音频内容 &lt;video&gt; 定义视频（video 或者 movie） 定义多媒体资源 &lt;video&gt; 和 &lt;audio&gt; &lt;embed&gt; 定义嵌入的内容，比如插件。 为...

    vue ---- 基于canvas的绘制海报组件

    在这个组件中，Canvas成为了海报绘制的画布，开发者可以通过JavaScript API来控制每一像素的颜色、形状、文字等元素，实现高度自定义的视觉效果。 Vue组件化的特点在于将UI界面拆分成可复用的独立单元，每个单元都...

    微信小程序ec-canvas

    在微信小程序中，`ec-canvas` 是一个特殊的画布组件，它能够提供丰富的图形绘制能力，如线条、形状、图像处理等，这对于创建动态图表、游戏、数据可视化等场景非常有用。然而，在实际使用中，开发者可能会遇到一些...

    开源的HTML5 Canvas画图插件 - Literally Canvas

    《开源的HTML5 Canvas画图插件 - Literally Canvas详解》 HTML5的Canvas元素为网页带来了强大的图形绘制能力，而Literally Canvas则是一个优秀的基于Canvas的开源画图插件，它提供了一套完整的画图工具，使得用户...

    node-canvas, node Canvas是一个Cairo支持的NodeJS画布实现.zip

    node-canvas, node Canvas是一个Cairo支持的NodeJS画布实现 节点画布这是版本 2.0.0 -alpha的文档Alpha版本的2.0可以使用 npm install canvas@next 安装。有关从 1.x 升级到 2. x.的指南，请参阅变更日志版本 1.x ...

    文字粒子效果html5-canvas-side-文字.rar

    在这个“文字粒子效果html5-canvas-side-文字.rar”压缩包中，包含的项目是一个利用Canvas API创建的文字粒子效果示例。这种效果常用于网站背景、动态头像、艺术字展示等，可以给用户带来视觉上的冲击力和趣味性。 ...

    infinite-canvas:无限的html5画布

    无限画布无限的html5画布描述提供一个接口，以垂直和水平无限地平移html5画布。 这通过创建无限增长的缓冲画布来工作，当使用.move([x, y])相对移动原点或绝对使用.setOrigin([x, y])相对移动原点时，可以调整画布的...

    Android 画布Canvas之连线动画Demo

    在这个"Android画布Canvas之连线动画Demo"中，我们将深入探讨如何利用Canvas实现动态的连线动画效果，包括控制动画速度、线条颜色和线宽。 首先，我们要理解Canvas的基本绘图操作。`Canvas`提供了如`drawLine()`、`...

    html5-canvas-mouse-ink

    "html5-canvas-mouse-ink"这个项目显然与Canvas有关，特别是涉及到了鼠标交互和动画效果，这通常是用来创建某种动态视觉效果，比如跟随鼠标移动的墨迹效果。 在HTML5 Canvas中，`&lt;canvas&gt;`元素是核心，它是画布，而...

    Android 自定义画布canvas 实现绘制和清空画布功能

    在Android开发中，自定义画布Canvas是实现图形绘制的核心工具。...总之，自定义画布Canvas是Android图形界面开发中不可或缺的一部分，通过熟练掌握其用法，可以实现各种复杂而富有创意的视觉效果。

    canvas拼图游戏,基于html + canvas画布实现

    canvas拼图游戏,基于html + canvas画布实现

    HTML5+JS游戏开发模块----canvas打字游戏

    HTML5+JS游戏开发模块----canvas打字游戏 里面实现多个字母同时出现，每个字体都有自己的随机速度，字母数组的随机生成，canvas 模拟鼠标经过效果，鼠标点击，按键触发，字母换颜色，项目简单，希望能够给初学者一些...

    HTML5之画布Canvas.doc

    ### HTML5画布Canvas知识点详解 #### 一、Canvas简介 HTML5的画布(Canvas)是一种用于客户端点阵图形的设计元素。与传统的HTML元素不同，Canvas本身并不具备绘图能力，而是提供了一种机制，使得JavaScript可以利用...

    html5 canvas画布绘制圆形时钟代码

    在这个“html5 canvas画布绘制圆形时钟代码”示例中，我们将深入探讨如何利用Canvas API来创建一个功能完备的圆形时钟。 首先，你需要在HTML文件中创建一个`&lt;canvas&gt;`元素，它将作为我们的画布。例如： ```html &lt;!...

    html5 canvas画布实现液体波浪动画效果

    本文将深入探讨如何利用HTML5 Canvas实现液体波浪动画效果。 首先，我们要了解Canvas的基本用法。Canvas是一个基于矢量图形的元素，通过JavaScript API来操作。在HTML中，我们可以通过`&lt;canvas&gt;`标签创建一个画布，...

    html-canvas-fireworks.rar

    本项目"html-canvas-fireworks.rar"就是一个利用Canvas实现的前端交互式烟花秀。用户只需在屏幕上点击，就能看到炫丽的烟花在画布上绽放，提供了独特的用户体验。 在HTML5 Canvas中，我们通过JavaScript来控制画布...

    html5-canvas-loader.rar

    这个"html5-canvas-loader.rar"文件很可能包含了一个使用HTML5 Canvas技术实现的加载器示例。让我们深入探讨HTML5 Canvas以及如何使用它来创建加载器。 HTML5 Canvas是一个基于矢量图形的画布元素，通过JavaScript ...

    html5-实现canvas宇宙黑洞炫酷粒子动画特效.rar

    HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的视觉效果。在这个“html5-实现canvas宇宙黑洞炫酷粒子动画特效.rar”压缩包中，包含的代码示例正是利用Canvas API创建...

Magicbox
Global site tag (gtag.js) - Google Analytics