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. Linux 之 网络相关设置

    网络相关设置 参考教程:[千峰教育] 命令: ping: 作用:通常用于检测网络设备的连通性. 格式:ping IP/域名 选项:-c,指定方式测试数据包的次数 实例:ping www.baidu.c ...

  2. iOS键盘中英文切换键盘高度获取通知方法

    iOS键盘中英文切换键盘高度获取通知方法, 有需要的朋友可以参考下. 注册通知 - (void)viewWillAppear:(BOOL)animated { [super viewWillAppea ...

  3. Day 17 编码+文本编辑+函数

    知识点篇: #! /usr/bin/env python # -*- coding: utf-8 -*- # __author__ = "DaChao" # Date: 2017/ ...

  4. C#连接OleDBConnection数据库的操作

    对于不同的.net数据提供者,ADO.NET采用不同的Connection对象连接数据库.这些Connection对我们屏蔽了具体的实现细节,并提供了一种统一的实现方法. Connection类有四种 ...

  5. Java 网络通信【01】TCP

    不积跬步,无以至千里:不积小流,无以成江海.——<荀子劝学> JAVA中设计网络编程模式的主要有TCP和UDP两种. TCP是属于即时通信,点对点连接进行通信. UDP是通过数据包来进行通 ...

  6. Light oj 1013 - Love Calculator (LCS变形)

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1013 题意: 给你两个字符串,让你构造出一个长度最小的字符串,且它的子序列包含 ...

  7. 邁向IT專家成功之路的三十則鐵律 鐵律十七：IT人休閒之道-清心

    現代人的休閒生活可說是兩類極端的表現,一類是整天待在家裡當個超級宅男宅女,假日走最遠的路就是附近三百公尺內的泡沫紅茶店.另一類則是抱著及時享樂心態的美女與型男,整天趴趴走把辛苦賺來的錢都拿去玩樂.美食 ...

  8. 【jar】JDK将单个的java文件打包为jar包，并引用到项目中使用【MD5加密】

    ==================================================================================================== ...

  9. cocos2d-x step by step(1) First Blood

    下了cocos2d-x 源码,开搞! 首先,笔者本身 1)      5年没有摸过c++了 2)     没用过cocos2d-x 3)      有强烈的求知欲望(这条每个简历个人介绍不都这么写么, ...

  10. android clipRect Op.xxx各个参数理解

    有点小啰嗦的一篇学习笔记,可以直接看最后得出的结论:前面的各种图片和说明都是为最后的结论服务的 1)剪切:和平常画图工具剪切的作用一样,在画布上剪切一个区域,比如剪切一个Rect区域,画布canvas ...