<!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. 论山寨手机与Android联姻 【3】手机是怎样生产出来的

    要说清楚MTK在商业模式上有什么优势,以及Android对于MTK未来的手机开发会有什么影响,首先得了解手机从设计,开发到生产的整个过程.让我们先来看看手机的生产过程.在生产制造环节,山寨手机和正牌手 ...

  2. ID卡常见型号

    EM ID卡,主要是采用瑞士EM或台湾GK公司的4100.4102系列IC芯片 + 线圈 + 卡基封装而成. (1)4001感应式ID厚卡:台湾4001 COB 特征:普通型感应卡,厚薄适中,带有ID ...

  3. top k 算法

    对于一个非有序的数组A[p..r],求数组中第k小的元素. 如何考虑 排序(部分排序)就不用说了..o(nlgn),当然如果在实际情况中要一直取值,当然要排序后,一次搞定,以后都是O(1) 我们这里提 ...

  4. aix puppet agent

    demo控制脚本tel,150 5519 8367 Running Puppet on AIX Puppet on AIX is… not officially supported, yet stil ...

  5. 学习wxpython的网站

    http://xoomer.virgilio.it/infinity77/Phoenix/main.html https://wxpython.org/Phoenix/docs/html/main.h ...

  6. 1005 Number Sequence（HDU）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1005 Number Sequence Time Limit: 2000/1000 MS (Java/O ...

  7. 我的小前端 （1）—— 安卓机和ios机的区别

    没有什么特别新技术,就是记录我做移动端遇到的问题 2016-02-16 微信,支付宝和APP都会遇到这些问题 一.安卓机和ios机的区别 1.常用 <head>        <me ...

  8. js——BOM

    BOM:Browser Object Model  浏览器对象模型 open(页面的地址url,打开的方式) :方法  打开一个新的窗口(页面) 如果url为空,折磨人打开一个空白页面 如果打开方式为 ...

  9. -bash: ./test.sh: /bin/bash^M: bad interpreter: No such file or directory

    刚刚学习SHELL 写了一个简单的例子发生如下错误 -bash: ./test.sh: /bin/bash^M: bad interpreter: No such file or directory ...

  10. 解压tomcat后一闪而过的问题

    解压tomcat压缩包后,直接点击startup会出现一闪而过. 免安装的tomcat双击startup.bat后,启动窗口一闪而过,而且tomcat服务未启动. 原因是:在启动tomcat是,需要读 ...