<!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. W5300E01-ARM 交叉编译器(Cross Compiler)用户手册

    W5300E01-ARM是基于W5300的ARM功能测试评估板: 1      简介 当用户的开发环境与目标系统不同时就会用到交叉编译器. 例如,当开发基于ARM的嵌入式系统时,用户就需要在电脑上写出 ...

  2. 编程内功修炼之数据结构—BTree（二）实现BTree插入、查询、删除操作

    1 package edu.algorithms.btree; import java.util.ArrayList; import java.util.List; /** * BTree类 * * ...

  3. 13-7-1 做了一个360优化大师的主页（就是一个主页UI）

    模仿360优化大师做了一个下它的首页.   代码如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/re ...

  4. 斯坦福NG机器学习课程：Anomaly Detection笔记

    Anomaly Detection Problem motivation: 首先描写叙述异常检測的样例:飞机发动机异常检測 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkb ...

  5. Effective C++ 条款18

    让接口easy被正确使用,不easy被误用 如题目,我们自己的程序接口是面向用户的,程序的目的不可是解决这个问题,并且要让用户easy使用.所以.必须保证我们的程序接口具有非常强的鲁棒性. 怎么保证接 ...

  6. LCD与ARM，具体

    一  实验内容简要描写叙述 1．实验目的 学会驱动程序的编写方法,配置S3C2410的LCD驱动,以及在LCD屏上显示包含bmp和jpeg两种格式的图片 2．实验内容  (1)分析S3c2410实验箱 ...

  7. 切换tab，并且动态添加标签

    <script type="text/javascript"> /*处理ie7.ie8不兼容getElementsByClassName*/ if(!document. ...

  8. Mustache学习

    Mustache是基于JavaScript的一款模版Web引擎,Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档. 一.Musta ...

  9. ABCpdf.NET中Rect，Bottom，Height的关系

    因为项目需要新功能,要在一个图片的上下加上固定高度的白边如下图.项目中一直使用ABCpdf.NET处理图片,但我一直没有做这方面的功能,所以找来API参考做. 这个简单需求做的过程中出现了一些曲折,主 ...

  10. JAVA 初识类加载机制 第13节

    JAVA 初识类加载机制 第13节 从这章开始,我们就进入虚拟机类加载机制的学习了.那么什么是类加载呢?当我们写完一个Java类的时候,并不是直接就可以运行的,它还要编译成.class文件,再由虚拟机 ...