<!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. 在 Windows Azure 网站中进行纵向扩展和横向扩展

    编辑人员注释:本文章由 Windows Azure 网站团队的项目经理 Byron Tardif 撰写. 当您开始一个新的 Web 项目,或者刚刚开始开发一般的网站和应用程序时,您可能希望从小处着手. ...

  2. Android UI ActionBar功能-ActionBarSherlock 的使用

    ActionBarSherlock实现了在ActionBar上添加一个下拉菜单的功能,也是App常用的功能之一: ActionBarSherlock是第三方提供的一个开源类库,下载地址:http:// ...

  3. sql server 日期处理datediff

    语法: DATEDIFF(datepart,startdate,enddate) datepart 参数可以是下列的值: date-part : year | quarter | month | we ...

  4. AngularJs 常用函数

    /** * [intersect 取两个数组的交集] var firstArray = [1,3,5]; var secondArray = [2,5,8]; var result */ .filte ...

  5. TextView 为部分文字添加下划线，并实现单击事件

    在开发应用的过程中经常会遇到显示一些不同的字体风格的信息,如关键词高亮显示的等.对于类似的情况,一般我们会想着使用多个TextView去实现,对于每个TextView设置不同的字体风格来满足需求.   ...

  6. C# DataTable 详解

    添加引用 using System.Data; 创建表 //创建一个空表 DataTable dt = new DataTable(); //创建一个名为"Table_New"的空 ...

  7. EC读书笔记系列之7：条款12 复制对象时勿忘其每一个成分

    记住: ★copying函数应确保复制“对象内的所有成员变量”及“所有base class成分” ★不要尝试以某个copying函数实现另一个copying函数.应该将共同机能放进第三个函数中,并由两 ...

  8. JVM学习之GC参数设置

    1: heap size a: -Xmx 指定jvm的最大heap大小,如:-Xmx2g b: -Xms 指定jvm的最小heap大小,如:-Xms1g c: -Xmn 指定jvm中New Gener ...

  9. [分　享] PHPCMS V9 更换域名,附件地址无法批更新(更换变便)问题>解决方法!!

    大家应该都有在域名更换(比如说,从本地上传到空间)的情况下,用内容>附件管理>附件地址替换 功能. 基本上替换不了所有表中原来域名的地址. 现PHPCMS V9最新版本的依旧存在些问题. ...

  10. 管理 sendmail 的邮件队列

    邮件队列是存储 sendmail 命令传送的邮件消息数据和控制文件的目录.缺省情况下,邮件队列是 /var/spool/mqueue. 邮件消息可能由于很多原因而排入队列. 例如: sendmail  ...