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. C# DataSet与DataTable的区别和用法

    DataSet是数据集,DataTable是数据表,DataSet存储多个DataTable.DataSet和DataTable像是专门存储数据的一个容器,在你查询数据库得到一些结果时可以存在里面. ...

  2. 在 .Net Core xUnit test 项目中使用配置文件

    在对项目做集成测试的时候,经常会需要用到一些参数比如用户名密码等,这些参数不宜放在测试代码中.本文介绍一种方法:使用配置文件. 添加配置文件 在集成测试项目目录下新建文件:Configuration. ...

  3. html移动端 -- meta-模板 + rem

    第一种方式: ps 不用除以2<header> <meta charset="utf-8"> <meta name="viewport&qu ...

  4. Codefroces Gym101572 I.Import Spaghetti-有向图跑最小环输出路径(Floyd)

    暑假学的很多东西,现在都忘了,补这道题还要重新学一下floyd,有点难过,我暑假学的东西呢??? 好了,淡定,开始写题解. 这个题我是真的很难过啊,输入简直是有毒啊(内心已经画圈诅咒出题人无数次了.. ...

  5. 2017 ACM-ICPC 沈阳区域赛记录

    出发日 中午坐大巴前往萧山机场. 哇开心又可以坐飞机了 飞机延误了.在候机大厅里十分无聊,先用机场的电脑玩了会小游戏 然后偷偷切了2个水题 (什么编译器IDE都没有,只能记事本了) 飞机上什么东西都没 ...

  6. Codeforces 696E ...Wait for it...（树链剖分）

    题目链接  ...Wait for it... 考虑树链剖分. 对于树上的每个点开一个set,记录当前该节点上所有的girls. 每个节点初始的权值为set中的最小值. 询问的时候每次在路径上寻找最小 ...

  7. 【grpc】spring boot+grpc的使用

    spring boot+grpc的使用 参考:https://baijiahao.baidu.com/s?id=1573961922096412&wfr=spider&for=pc

  8. java单测时的等待模块awaitility

    单测时,可以用来等待异步任务完成 在编写自动化测试用例过程中,往往会遇见被测代码有异步或者队列处理的中间过程:如果需要校验这部分结果,必须等待异步操作结束或队列消费完,而这个中间等待的时间是不确定的, ...

  9. Git 常用场景操作

    git init      在本地新建一个repo,进入一个项目目录,执行git init,会初始化一个repo,并在当前文件夹下创建一个.git文件夹.   git clone      获取一个u ...

  10. awk中的NR FNR

    shell编程中,awk简直就是一把利器,你能够把它看成shell的一部分,也能够看成一种单独的语言,功能十分强大.今天先来说一说NR与FNR 先准备两个文件: 1.txt,内容为: user pas ...