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. LeetCode OJ-- Spiral Matrix II

    https://oj.leetcode.com/problems/spiral-matrix-ii/ 螺旋矩阵,和题目一一样的思路,这个是产生n*n 矩阵. #include <iostream ...

  2. GPP加密破解工具gpp-decrypt

    GPP加密破解工具gpp-decrypt   GPP是Group Policy Preferences(组策略首选项)的缩写,这是一个组策略实施工具.通过该工具,网络管理员可以实现更多的网络管理,如驱 ...

  3. .net 哈希

    using System; using System.Collections.Generic; using System.Linq; using System.Security.Cryptograph ...

  4. html中的列表标签

    1.<dl>定义列表,<dt>定义列表中的项目,<dd>对项目的描述 例: 效果: 2.<ul>无序列表,<li>列表项 例: 效果: 3. ...

  5. xamarin studio 中SpinButton ComBox Splid 鼠标放上去就会自动接收焦点，然后进行数值变化

    公司做跨平台项目,用XamarinStudio 开发mac版本,语法还是C#,但是,尼玛XamarinStudio的控件就是坑爹啊. 其他的暂时不累赘,笔者画界面,一堆控件放到一个界面上,当超出屏幕时 ...

  6. Controller 层实现

    一.实验介绍 1.1 实验内容 本节课程主要利用 Spring MVC 框架实现 Controller 层以及一些辅助类的实现. 1.2 实验知识点 Spring MVC 框架 1.3 实验环境 JD ...

  7. Nutch学习笔记一 ---环境搭建

    学习环境: ubuntu 概要: Nutch 是一个开源Java 实现的搜索引擎.它提供了我们运行自己的搜索引擎所需的全部工具.包括全文搜索和Web爬虫. 通过nutch,诞生了hadoop.tika ...

  8. css3 - target

    通过CSS3伪元素target,我们可以实现拉风琴 源码 <!DOCTYPE HTML> <html lang="en-US"> <head> ...

  9. C++静态库与动态库深入研究

    什么是库 库是写好的现有的,成熟的,可以复用的代码.现实中每个程序都要依赖很多基础的底层库,不可能每个人的代码都从零开始,因此库的存在意义非同寻常. 本质上来说库是一种可执行代码的二进制形式,可以被操 ...

  10. 使用match、test控制输入字符格式后键盘向左向右键光标自动定位解决

    直接举例说明(正则表达式替换红色区域即可) /** * 判断是否位数字 * @param obj 数字 */ function numOnly(obj) { if(!(/^\d*$/.test(obj ...