<!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. Java_SSH项目主要步骤记录

    建立Spring-Struts-Hibernate的步骤整理 1. 建立web project 2. 建立hernate, action, service包 3. 右击项目,add myeclipse ...

  2. 关于“找不到附属汇编 Microsoft.VC90.CRT，上一个错误是 参照的汇编没有安装在系统上。”的解决

    关于“找不到附属汇编 Microsoft.VC90.CRT,上一个错误是 参照的汇编没有安装在系统上.”的解决 一个项目需要在Win系统用计划任务执行PHP,写了个批处理bat利用php-cgi.ex ...

  3. Javascript基本算法演练 Seek and Destroy

    转载自:http://aeroj-blog.logdown.com/posts/435808 Seek and Destroy You will be provided with an initial ...

  4. jquery中read与js中onload区别

    在JavaScript中,onload函数是最经常使用的,几乎涉及到JavaScript的童鞋都少不了要接触它.这个函数的作用就是等待网页完全装载完了以后再去执行代码块内的语句,因为按照文档流的执行顺 ...

  5. 字符串查找--B中是否有元素不在A中

    #include <stdio.h> int main(int argc, char const *argv[]) { char str[26]="AFDKJASD"; ...

  6. Cocos2dx 中的CCCallFunc,CCCallFuncN,CCCallFuncND,CCCallFuncO比较

    qinning199原创,欢迎转载.转载请注明:http://www.cocos2dx.net/?p=27 首先看一张图片,表示了CCCallFunc的继承关系: 1.CCCallFunc,回调,调用 ...

  7. foreach真的比for性能高吗

    void Main() { ; List<int> list=new List<int>(); ;i<count;i++) { list.Add(i); } List&l ...

  8. 第四课 Grid Control实验 GC OMS安装（第二台机器部署）

    2.GC OMS安装(第二台机器部署) 1. 配置图形化 [oracle@ocm2 ~]$ xhost + access control disabled, clients can connect f ...

  9. hadoop笔记之Hive的数据存储(分区表)

    Hive的数据存储(分区表) Hive的数据存储(分区表) 分区表 Partition对应于数据库的Partition列的密集索引 在Hive中,表中的一个Partition对应于表下的一个目录,所有 ...

  10. 无缝滚动 jQuery经典代码 （收藏）

    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4 ...