HTML5 Canvas 画图入门

HTML5 Canvas 画图入门，仅供学习參考

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>HTML5 移动Web开发指南</title>

    <style type="text/css">

        h1, h5

        {

            text-align: center;

        }

        canvas

        {

            float: left;

            margin: 10px;

            overflow: hidden;

        }

    </style>

    <script type="text/javascript" language="javascript">

        window.onload = function () {

            drawCanvas(0, 0, "canvase_01", "red", 200, 200);

            drawCanvas(0, 0, "canvase_02", "green", 200, 100);

            drawCanvas(0, 0, "canvase_05", "blank", 300, 60);

            drawCanvas(75, 60, "canvase_05", "gray", 150, 90);

            drawCanvas(0, 0, "canvase_06", "blank", 300, 50);

            drawCanvas(0, 50, "canvase_06", "red", 300, 50);

            drawCanvas(0, 100, "canvase_06", "#F8CB1C", 300, 50);

            drawCanvas(0, 0, "canvase_07", "green", 100, 150);

            drawCanvas(100, 0, "canvase_07", "white", 100, 150);

            drawCanvas(200, 0, "canvase_07", "red", 100, 150);

            drawRound("canvase_03", "blue", 75, true);

            drawRound("canvase_04", "yellow", 75, false);

            drawRound("canvase_08", "red", 75, true);

            drawRound("canvase_08", "yellow", 75, false);

        };

        /*

        * Canvas 画非圆图形測试

        * x:       图形的X轴開始坐标

        * y:       图形的Y轴開始坐标

        * id：     元素id

        * bgColor: 填充的背景颜色

        * width:   宽

        * height:  高

        */

        function drawCanvas(x, y, id, bgColor, width, height) {

            var canvas = document.getElementById(id);

            if (canvas != null && canvas != undefined) {

                var ctx = canvas.getContext("2d");

                ctx.fillStyle = bgColor;

                //第一个和第二个參数，代表開始坐标

                //第三个參数是图形的宽

                //第四个參数是图形的高

                ctx.fillRect(Number(x), Number(y), Number(width), Number(height));

            }

        }

        /*

        * Canvas 画圆測试

        * id：     元素id

        * bgColor: 填充的背景颜色

        * R：      圆半径

        * IsRound: 是否为正圆(true正圆、false 半圆)

        */

        function drawRound(id, bgColor, R, IsRound) {

            var canvas = document.getElementById(id);

            if (canvas != null && canvas != undefined) {

                var ctx = canvas.getContext("2d");

                ctx.fillStyle = bgColor;

                ctx.beginPath();

                var round = Math.PI;

                if (Boolean(IsRound))

                    round = Math.PI * 2;

                //第一个和第二个參数。代表圆心坐标

                //第三个參数是圆的半径

                //第四个參数代表圆周起始位置(0 起始位置。沿顺时针路线，各自是0.5 (正下方)。1 PI和1.5 PI(正上方)。为画饼图提供了扇形范围的根据)

                //第五个參数是弧长(Math.PI*1 半圆、Math.PI*2就是整个圆)

                ctx.arc(150, 75, Number(R), 0, round, true);

                ctx.closePath();

                ctx.fill();

            }

        }

    </script>

</head>

<body>

    <header>

        <section>

            <h1>

                HTML5 移动Web开发指南</h1>

        </section>

    </header>

    <fieldset>

        <legend>HTML5 新元素--Canvas画图元素</legend>

        <article>

            <section>

                <canvas id="canvase_01">

                 您的浏览器不支持Canvas元素！

                </canvas>

                <canvas id="canvase_02">

                 您的浏览器不支持Canvas元素！

                </canvas>

                <canvas id="canvase_03">

                 您的浏览器不支持Canvas元素！

                </canvas>

                <canvas id="canvase_04">

                您的浏览器不支持Canvas元素！

</canvas>

                <canvas id="canvase_05">

                您的浏览器不支持Canvas元素。

                </canvas>

                <canvas id="canvase_06">

                您的浏览器不支持Canvas元素！

</canvas>

                <canvas id="canvase_07">

                您的浏览器不支持Canvas元素！

</canvas>

                <canvas id="canvase_08">

                您的浏览器不支持Canvas元素！

</canvas>

            </section>

        </article>

    </fieldset>

    <footer>

        <section>

            <h5>

                <span style="font-family: Arial, Helvetica, sans-serif;">HTML5 新元素--Canvas画图元素</span>

            </h5>

        </section>

    </footer>

</body>

</html>

效果图：

HTML5 Canvas 画图入门的更多相关文章

  1. html5 Canvas画图3：1px线条模糊问题

    点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...

  2. html5 canvas 画图移动端出现锯齿毛边的解决方法

    使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...

  3. HTML5 canvas画图

    HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...

  4. HTML5 Canvas画图与动画学习59例

    HTML5 Canvas画图与动画学习59例 学习HTML5 动画,画图的好资料. HTML5 Canvas画图与动画学习59例

  5. HTML5 Canvas 画图组件 All In One

    HTML5 Canvas 画图组件 All In One Canvas SVG Canvas + SVG refs https://www.infoq.cn/article/1BVg9VDSmqyHv ...

  6. html5 canvas画图之图形随拖动而复制（有操作指示）

    学习html5 canvas,写了一个小练习来加深理解,可以实现图形随拖动而复制. <!DOCTYPE html> <html> <head> <meta c ...

  7. jTopo HTML5 Canvas 画图组件

    jTopo是什么? jTopo(Javascript Topology library)是一款完全基于HTML5 Canvas的关系.拓扑图形化界面开发工具包. jTopo关注于数据的图形展示,它是面 ...

  8. 玩转html5<canvas>画图

    导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...

  9. HTML5 Canvas——基础入门

    认识canvas html5的新标签 <canvas>标签只是图像容器,必须使用js来绘制图形 可以通过多种方法使用canvas绘制路径,盒,圆,字符以及添加图像 canvas画布 < ...

随机推荐

  1. poj 1573(搜索)

    Robot Motion Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 12351   Accepted: 5982 Des ...

  2. CSS 实践：实现下拉菜单的方法

    基于display属性的切换. 将需要不可见的二级菜单ul元素的display元素设为none,当需要可见的时候改为block. .menu ul li ul { display: none; } . ...

  3. ABP开发框架前后端开发系列---（2）框架的初步介绍

    在前面随笔<ABP开发框架前后端开发系列---(1)框架的总体介绍>大概介绍了这个ABP框架的主要特点,以及介绍了我对这框架的Web API应用优先的一些看法,本篇继续探讨ABP框架的初步 ...

  4. [Algorithms] Quicksort algorithm using TypeScript

    Quicksort (also called partition sort and pivot sort) is arguably the most used sorting algorithm. I ...

  5. 【LeetCode-面试算法经典-Java实现】【002-Add Two Numbers (单链表表示的两个数相加)】

    [002-Add Two Numbers (单链表表示的两个数相加)] 原题 You are given two linked lists representing two non-negative ...

  6. 音频单元组件服务参考（Audio Unit Component Services Reference）

    目录 了解Audio Unit体系结构 文档结构预览 结构单元介绍 本文主要介绍AudioUnit的组成 本文由自己理解而成,如有错误,请欢迎网友们指出校正. 了解Audio Unit体系结构 开始前 ...

  7. 大型视频网站YouTube架构学习笔记

    http://www.kaiyuanba.cn/html/1/131/147/7540.htm这几天一直在关注和学习一些大型网站的架构,希望有一天自己也能设计一个高并发.高容错的系统并能应用在实践上. ...

  8. MySQL数据导入与导出

    http://blog.chinaunix.net/uid-23354495-id-3188029.html     mysql备份脚本之select into outfile

  9. shell grep正则匹配汉字

    Shell grep正则匹配中文 测试文本 demo_exe.c,内容如下,需要注意保存的编码格式,对输出到终端有影响: 我们中文操作系统ASNI默认是GBK的. #include<stdio. ...

  10. docker--caffe

    Running an official image You can run one of the automatic builds. E.g. for the CPU version: docker ...