澳门威利斯人_威利斯人娱乐「手机版」

来自 澳门威利斯人 2019-08-03 16:09 的文章
当前位置: 澳门威利斯人 > 澳门威利斯人 > 正文

系列文章索引,千呼万唤

[索引页]
[源码下载] 

  • 画布 德姆o - 画布的基本概念及 德姆o,canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURubiconL()
  • 在画布上制图矩形 - 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, close帕特h()
  • 在画布上绘制矩形(以路线的法子)- rect()

千呼万唤 HTML 5 (9) - 画布(canvas)之承载媒体

  • 根元素 - doctype, html
  • 元数据成分 - head, title, base, link, meta, style
  • 本子成分 - script, noscript

OK
[源码下载]

OK
[源码下载]

介绍
HTML 5: 画布(canvas)之承载媒体

7、千呼万唤 HTML 5 (7) - 表单成分
介绍
HTML 5: 表单成分

4、彰显其余画布 | drawImage()
canvas/media/canvas.html

4、千呼万唤 HTML 5 (4) - 文本语义成分
介绍
HTML 5: 文本语义成分

3、显示录像截图 | drawImage()
canvas/media/video.html

千呼万唤 HTML 5 类别小说索引

<!DOCTYPE HTML>
<html>
<head>
    <title>在 canvas 上呈现图片的 demo</title>
</head>
<body>
    <canvas id="canvas" width="800" height="600" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">在画布上呈现图片</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.drawImage() 的可绘制对象包括:HTMLImageElement, HTMLVideoElement, HTMLCanvasElement
                 *
                 * context.drawImage(image, x, y) - 绘制图像
                 *   image - 图像对象,可以来自 img 标签
                 *   x - 图像绘制到画布后的左上角的 x 坐标
                 *   y - 图像绘制到画布后的左上角的 y 坐标
                 *
                 * context.drawImage(image, x, y, width, height) - 绘制图像
                 *   image - 图像对象,可以来自 img 标签
                 *   x - 图像绘制到画布后的左上角的 x 坐标
                 *   y - 图像绘制到画布后的左上角的 y 坐标
                 *   width - 图像绘制到画布后的宽
                 *   height - 图像绘制到画布后的高
                 *
                 * context.drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight) - 绘制图像
                 *   image - 图像对象,可以来自 img 标签
                 *   sourceX - 截取源图像,相对于源图像的左上角的 x 坐标,
                 *   sourceY - 截取源图像,相对于源图像的左上角的 y 坐标,
                 *   sourceWidth - 截取源图像,需要截取的宽
                 *   sourceHeight - 截取源图像,需要截取的高
                 *   destX - 图像绘制到画布后的左上角的 x 坐标
                 *   destY - 图像绘制到画布后的左上角的 y 坐标
                 *   destWidth - 图像绘制到画布后的宽
                 *   destHeight - 图像绘制到画布后的高
                 *
                 */

                ctx.drawImage(img, 0, 0); // 按图像原始大小显示到画布上
                ctx.drawImage(img, 0, 0, 200, 200); // 显示图像到画布上,并指定其宽高
                ctx.drawImage(img, 50, 0, 400, 100, 0, 300, 200, 50); // 截取源图像的一部分显示到画布上,并指定被截取部分显示时的宽和高
            }

            img.src = "http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png";
            // img.src = "http://www.cnblogs.com/assets/html5_logo.png";
        }

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

    </script>
</body>
</html>

5、千呼万唤 HTML 5 (5) - 成分的通用属性
介绍
HTML 5: 成分的通用属性


  • 表单成分之 input 成分 - text, password, url, telephone, email, search, file, radio, checkbox, button, submit, reset, number, range, image, hidden, color, datetime, datetime-local, date, time, month, week
  • input 成分的通用属性 - autocomplete, placeholder, pattern, dirname, size, maxlength, readonly, required, list, multiple, min, max, step

作者:webabcd

  • 区块成分 - body, article, section, header, footer, h1, h2, h3, h4, h5, h6, hgroup, aside, nav, address

示例
1、展现文本 | font, textAlign, textBaseline, strokeStyle, fillStyle, fillText(), measureText, TextMetrics.width
canvas/media/text.html

2、千呼万唤 HTML 5 (2) - 区块成分
介绍
HTML 5: 区块成分

<!DOCTYPE HTML>
<html>
<head>
    <title>在 canvas 上呈现其他 canvas 的 demo</title>
</head>
<body>
    <canvas id="canvas" width="300" height="300" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />

    <canvas id="canvas2" width="300" height="300" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />

    <button type="button" onclick="drawIt();">在画布上呈现其他画布</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

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

        function drawIt() {

            clearIt();

            var img = new Image();

            img.onload = function () {
                ctx.drawImage(img, 0, 0, 300, 300);

                /*
                 * context.drawImage() 的可绘制对象包括:HTMLImageElement, HTMLVideoElement, HTMLCanvasElement
                 *
                 * 呈现指定的 canvas 的当前图像,其他参数说明详见 image.html
                 */
                ctx2.drawImage(document.getElementById('canvas'), 0, 0);
            }

            img.src = "http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png";
            // img.src = "http://www.cnblogs.com/assets/html5_logo.png";
        }

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

    </script>
</body>
</html>

8、千呼万唤 HTML 5 (8) - 画布(canvas)之绘制图形
介绍
HTML 5: 画布(canvas)之绘制图形

<!DOCTYPE HTML>
<html>
<head>
    <title>在 canvas 上呈现文本的 demo</title>
</head>
<body>
    <canvas id="canvas" width="600" height="600" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">在画布上呈现一些文本</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

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

        function drawIt() {

            clearIt();

            ctx.beginPath();
            ctx.moveTo(0, canvas.height / 2);
            ctx.lineTo(canvas.width, canvas.height / 2);
            ctx.moveTo(canvas.width / 2, 0);
            ctx.lineTo(canvas.width / 2, canvas.height);
            ctx.stroke();


            /*
             * context.font - 语法与 CSS 中的 font 属性相同,默认值为 10px sans-serif
             *
             * context.textAlign - 可能的值为:start, end, left, right, center;默认值为:start
             *
             * context.textBaseline - 可能的值为:top, hanging, middle, alphabetic, ideographic, bottom;默认值为:alphabetic
             */

            ctx.font = 'italic 24px 宋体';
            ctx.fillStyle = "blue";

            ctx.textBaseline = "top";
            // 不同 textAlign 的效果
            ctx.textAlign = "start";
            ctx.fillText("Horizontal", canvas.width / 2, 0);
            ctx.textAlign = "end";
            ctx.fillText("Horizontal", canvas.width / 2, 30);
            ctx.textAlign = "left";
            ctx.fillText("Horizontal", canvas.width / 2, 60);
            ctx.textAlign = "right";
            ctx.fillText("Horizontal", canvas.width / 2, 90);
            ctx.textAlign = "center";
            ctx.fillText("Horizontal", canvas.width / 2, 120);


            ctx.textAlign = "start";
            // 不同 textBaseline 的效果
            ctx.textBaseline = "top";
            ctx.fillText("Vertical", 0, canvas.height / 2);
            ctx.textBaseline = "hanging";
            ctx.fillText("Vertical", 100, canvas.height / 2);
            ctx.textBaseline = "middle";
            ctx.fillText("Vertical", 200, canvas.height / 2);
            ctx.textBaseline = "alphabetic";
            ctx.fillText("Vertical", 300, canvas.height / 2);
            ctx.textBaseline = "ideographic";
            ctx.fillText("Vertical", 400, canvas.height / 2);
            ctx.textBaseline = "bottom";
            ctx.fillText("Vertical", 500, canvas.height / 2);


            /*
             * context.strokeStyle - 调用 strokeText() 时字体的笔划颜色
             *
             * context.fillStyle - 调用 fillText() 时字体的填充颜色
             *
             * context.fillText(text, x, y [, maxWidth]) - 以填充的方式绘制文本内容
             *   text - 需要呈现的文本字符串
             *   x, y - 参考点坐标,textAlign 和 textBaseline 均会以此点为参考点
             *   maxWidth - 显示区域的最大长度,必要时会强制压缩文本的长度。可选参数
             *
             * context.strokeText(text, x, y [, maxWidth]) - 以笔划的方式绘制文本内容。参数说明同 fillText()
             */
            ctx.font = '64px 宋体';
            ctx.strokeStyle = 'blue';
            ctx.strokeText("strokeText", 0, 400);
            ctx.strokeText("strokeText", 0, 500, 100);


            /*
             * context.measureText(text) - 返回指定文本内容在当前上下文环境中的度量对象,即 TextMetrics 类型的对象
             * TextMetrics.width - TextMetrics 对象有一个名为 width 的只读属性,用于获取 TextMetrics 对象的长度值
             */
            var metrics = ctx.measureText("strokeText");
            alert(metrics.width);
        }

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

            ctx.textAlign = "start";
            ctx.textBaseline = "alphabetic";
        }

    </script>
</body>
</html>
  • 表现文本 - font, textAlign, textBaseline, strokeStyle, fillStyle, fillText(), measureText, TextMetrics.width
  • 表现图片 - drawImage()
  • 表现录像截图 - drawImage()
  • 表现别的画布 - drawImage()
<!DOCTYPE HTML>
<html>
<head>
    <title>在 canvas 上呈现视频截图的 demo</title>
</head>
<body>

    <video id="video" width="400" height="240" src="http://ie.microsoft.com/testdrive/Graphics/VideoFormatSupport/big_buck_bunny_trailer_480p_high.mp4" controls preload="metadata">
        您的浏览器不支持 video 标签
    </video>

    <br />

    <canvas id="canvas" width="400" height="240" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">在画布上呈现视频截图</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');
        var video = document.getElementById('video');
        var timerId = -1;

        function drawIt() {

            clearIt();

            timerId = setInterval(drawVideo, 300);

            function drawVideo() {
                if (!isNaN(video.duration)) {

                    /*
                     * context.drawImage() 的可绘制对象包括:HTMLImageElement, HTMLVideoElement, HTMLCanvasElement
                     *
                     * 呈现 video 对象的当前截图,其他参数说明详见 image.html
                     */
                    ctx.drawImage(video, 0, 0, 400, 240);
                }
            } 
        }

        function clearIt() {
            ctx.clearRect(0, 0, 400, 240);

            clearInterval(timerId);
        }

    </script>
</body>
</html>

3、千呼万唤 HTML 5 (3) - 内容分组成分
介绍
HTML 5: 内容分组成分

  • 表现文本 - font, textAlign, textBaseline, strokeStyle, fillStyle, fillText(), measureText, TextMetrics.width
  • 表现图片 - drawImage()
  • 表现摄像截图 - drawImage()
  • 表现其余画布 - drawImage()

6、千呼万唤 HTML 5 (6) - 表单成分之 input 成分
介绍
HTML 5: 表单成分之 input 成分

本文由澳门威利斯人发布于澳门威利斯人,转载请注明出处:系列文章索引,千呼万唤

关键词: 澳门威利斯人 HTML 5 Index文章索引