<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <h2>绘制矩形</h2>

    <canvas id="mo" width="400" height="280" style="border: 1px solid"></canvas>

    <script type="text/javascript">

        var canvas = document.getElementById("mo");

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

        ctx.shadowBlur = 5.6;//设置阴影的模糊度

        ctx.shadowColor = "#111";//设置阴影的颜色

        ctx.fillStyle = "#f22";

        ctx.fillRect(30, 20, 120, 60);

        ctx.fillStyle = "#ff2";

        ctx.fillRect(80, 60, 120, 60);

        ctx.fillStyle = "#333";

        ctx.lineWidth = 10;

        ctx.strokeStyle = "#6f3";

        ctx.fillRect(20, 130, 120, 60);

    </script>

    <h2>绘制文字</h2>

    <canvas id="mc" width="800" height="280" style="border: 1px solid"></canvas>

    <script type="text/javascript">

        var canvas = document.getElementById("mc");

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

        ctx.shadowBlur = 8.6;//设置阴影的模糊度

        ctx.shadowColor = "#555";//设置阴影的颜色

        ctx.fillStyle = "#f22";

        ctx.font = "italic 50px 隶书";

        ctx.textBaseline = 'top';

        ctx.fillText("百代繁华一朝都，谁非过客。", 0, 0);

        ctx.fillStyle = "#f0f";

        ctx.font = "bold 45px 宋体";

        ctx.fillText("千秋明月吹角寒，花是主人。", 0, 50);

    </script>

    <h2>绘制圆形</h2>

    <canvas id="Canvas2" width="800" height="280" style="border: 1px solid"></canvas>

    <script type="text/javascript">

        var canvas = document.getElementById("Canvas2");

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

        for (var i = 0; i < 10; i++) {

            ctx.beginPath();//开始定义路径

            ctx.arc(i * 25, i * 25, (i + 1) * 8, 0, Math.PI * 2, true);

            ctx.closePath();//关闭路径

            ctx.fillStyle = 'rgba(255,0,255,' + (10 - i) * 0.1 + ')';

            ctx.fill();

        }

    </script>

    <h2>LintTo</h2>

    <canvas id="Canvas1" width="800" height="280" style="border: 1px solid" ></canvas>

    <script type="text/javascript">

        function createStar(context, n, dx, dy, size)

        {

            context.beginPath();

            var dig = Math.PI / n * 4;

            for (var i = 0; i < n; i++) {

                var x = Math.sin(i * dig);

                var y = Math.cos(i * dig);

                context.lineTo(x * size + dx, y * size + dy);

            }

            context.closePath();

        }

        var canvans = document.getElementById("Canvas1");

        var ctx = canvans.getContext('2d');

        createStar(ctx, 3, 60, 60, 50);

        ctx.fillStyle = "#556";

        ctx.fill();

        createStar(ctx, 5, 160, 60, 50);

        ctx.fillStyle = "#156";

        ctx.fill();

        createStar(ctx,7, 260, 60, 50);

        ctx.fillStyle = "#192";

        ctx.fill();

        createStar(ctx, 9,360, 60, 50);

        ctx.fillStyle = "#345";

        ctx.fill();

    </script>

</body>

</html>

html5 绘制集合图形的更多相关文章

  1. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  2. [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

    在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...

  3. HTML5 Canvas ( 填充图形的绘制 ) closePath, fillStyle, fill

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 10 个超炫绘制图表图形的 Javascript 插件【转载+整理】

    原文地址 现在,有很多在线绘制图表和图形(Charts and Graphs)的 JavaScript 插件,这些插件还都是免费,以及图表库.这些插件大量出现的原因是基于一个事实:人们不再依赖于 Fl ...

  5. Html5绘制饼图统计图

    这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...

  6. HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识

    一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...

  7. html5绘制折线图

    html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...

  8. 最新最全的html5标签集合

    最新最全的html5标签集合,按字母顺序排列的标签列表 4:指示在HTML4.01中定义了该元素 5:指示在HTML5中定义了该元素 标签 描述 <!--...--> 定义注释 <! ...

  9. HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文PDF扫描版​

    <html5 canvas核心技术:图形.动画与游戏开发>是html5 canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典.amazon五星级超级 ...

随机推荐

  1. vs2008调试 Release（链接器来生成调试信息）

    VS2008 Release 修改配置: 1.项目——>属性——>C/ C++ ——> 常规 ——>调试信息格式——>用于“编辑并继续”的程序数据库(/ZI) 2.项目— ...

  2. android4.0 禁止横竖屏切换使用 android:configChanges="orientation|keyboardHidden"无效

    android4.0 禁止横竖屏切换使用 android:configChanges="orientation|keyboardHidden"无效    在之前的版本中都是在Man ...

  3. poj 3661 Running（区间dp）

    Description The cows are trying to become better athletes, so Bessie ≤ N ≤ ,) minutes. During each m ...

  4. wx.ToolBar

    wx.ToolBar A toolbar is a bar of buttons and/or other controls usually placed below the menu bar in ...

  5. 在win7下php查询数据库, 连接被重置

    解决方法一 将 php5 目录下的libmysql.dll拷贝至 windows/system32和apache/bin下 解决方法二 在apache/conf/httpd.conf文件中添加 Loa ...

  6. UIScrollview不全屏，解决方案

    self.edgesForExtendedLayout = UIRectEdgeNone;

  7. Python 随即生成DAG(有向无环图)

    给校队选拔赛出了道DAG上的背包问题,需要生成DAG数据. 最开始使用的方法是先随机生成再判环,如果有环就重新生成.这种方法得到DAG的概率随着点数和边数的增加而急速降低,为了一个DAG要生成很多次, ...

  8. Hadoop学习之编译eclipse插件

    近期准备開始学习Hadoop1.2.1的源码,感觉最好的方法还是能够在运行Hadoop及hadoop作业时跟踪调试代码的实际运行情况.因为选择的IDE为eclipse,所以准备编译一下hadoop的e ...

  9. Linux 常用命令学习

    sed 大法: cat file | sed 's/string/replace_str/' file 按大小分割文件 split -b 100m filename 设置vi不自动转换tab: set ...

  10. [C++空间分配]new运算符、operator new、placement new的区别于联系

    先科普一下: 1. new的执行过程: (1)通过operator new申请内存 (2)使用placement new调用构造函数(内置类型忽略此步) (3)返回内存指针 2. new和malloc ...