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. php接口开发时，数据解析失败问题，字符转义，编码问题

    php接口开发时,数据解析失败问题,字符转义,编码问题 情景: A平台--->向接口请求数据---->接口向B平台请求数据---->B平台返回数据给接口---->接口返回数据给 ...

  2. AC日记——丢瓶盖 洛谷 P1316

    题目描述 陶陶是个贪玩的孩子,他在地上丢了A个瓶盖,为了简化问题,我们可以当作这A个瓶盖丢在一条直线上,现在他想从这些瓶盖里找出B个,使得距离最近的2个距离最大,他想知道,最大可以到多少呢? 输入输出 ...

  3. 阿里数据库性能诊断的利器——SQL执行干预

    概述 在业务数据库性能问题诊断中,如果发现一个业务性能很差跟某个SQL有关,应用连接池几乎被该SQL占满,同时数据库服务器上也不堪重负.此时情况很紧急,业务改SQL重发布已经来不及了,运维能选择的操作 ...

  4. 2016Unite Shanghai 总结

    有幸参加了Unite 2016 Shanghai unity开发者大会,这里做一些简单总结 一.日本Marza 分享 <The Gift> Marza用unity做渲染,加上一些自己的扩展 ...

  5. Codeforces Round #317 [AimFund Thanks-Round] (Div. 2) Array 模拟

    题目链接:http://codeforces.com/contest/572/problem/A 题意 就给你两个数组,问你能不能从A数组中取出k个,B数组中取出m个,使得这k个都大于这m个. 题解 ...

  6. MySQL中limit使用动态参数的解决方法（拼接SQL字符串语句来执行SQL）

    官方好像说过limit已经在5.6版本上支持了动态参数,但是测试时依然还是不行. 那么要解决limit动态参数唯一能做的就是使用字符串SQL拼接的形式,然后再进行执行. 一般有以下方式解决: 1.存储 ...

  7. spring管理事务

    2.1 事务管理器 Spring并不直接管理事务,而是提供了多种事务管理器,他们将事务管理的职责委托给Hibernate或者JTA等持久化机制所提供的相关平台框架的事务来实现. Spring事务管理器 ...

  8. Unity -- 入门教程二

    为了接下来要做的小游戏,在这里我要小小的修改一下移动的代码. public class PlayerMove : MonoBehaviour { //定义移动的速度 public float Move ...

  9. mac os＋selenium2＋chrome驱动＋python3

    mac os 10.11.5 mac自带python2.7,自己下载了python3.5,pip list查看系统中的安装包,本人电脑中已经安装了pip和setuptools,若未安装,请先使用 su ...

  10. Gvim 和 Opencv编译

    好奇看了一下Gvim编译器:在官网上也有介绍,github上有源码,安装在电脑上,感觉需求不大,记那些命令也太多了.然后编译opencv过程中cmake成功了,但是VS下编译报了很多错,准备不搞这些了 ...