1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <title></title>
  6.      <style type="text/css">
  7.          canvas{background: #F5F5F5}
  8.      </style>
  9.  </head>
  10.  <body>
  11.      <canvas id="canvas1" width="900" height="1200">
  12.          当前浏览器不支持canvas
  13.      </canvas>
  14.      <script type="text/javascript">
  15.          var canvas=document.getElementById('canvas1');//定义变量获取画布DOM
  16.          var context=canvas.getContext('2d');//设置绘图环境为2d
  17.          context.lineWidth=4;
  18.          context.strokeStyle="#FF00FF";
  19.          context.moveTo(200,100);
  20.          context.lineTo(200,200);
  21.          context.lineTo(250,200);
  22.          context.lineTo(250,150);
  23.          context.lineTo(150,150);
  24.          context.lineTo(150,200);
  25.          context.lineTo(200,200);
  26.          context.lineTo(200,250);
  27.          //context.closePath();//从当前点回到起始点来封闭路径
  28.          context.stroke();
  29.          //绘制矩形
  30.          context.beginPath();//此句不能省，否则上面的图样式会受下面的设置影响
  31.          context.lineWidth=2;
  32.          context.strokeStyle="#0000FF";
  33.          context.rect(260,100,50,20) //语句结尾分号;可省
  34.          context.stroke();
  35.  
  36.          context.beginPath();
  37.          context.strokeRect(320,100,50,30);
  38.  
  39.          context.beginPath();
  40.          context.lineWidth=2;
  41.          context.fillStyle="#FF0000";
  42.          context.rect(380,100,40,20);
  43.          context.fill();
  44.  
  45.          context.beginPath();
  46.          context.lineWidth=2;
  47.          context.fillStyle="#00FF00";
  48.          context.fillRect(430,100,50,50);
  49.  
  50.          context.beginPath();
  51.          context.lineWidth=3;
  52.          context.arc(500,200,50,0,(Math.PI)/2);//默认false顺时针，可设置true逆时针
  53.          context.stroke();
  54.  
  55.          context.beginPath();
  56.          context.lineWidth=3;
  57.          context.arc(600,200,50,0,(Math.PI)/2);//默认false顺时针，可设置true逆时针
  58.          context.fill();
  59.          context.stroke();
  60.  
  61.          context.beginPath();
  62.          context.arc(600,100,50,0,(Math.PI)/2);
  63.          context.stroke();
  64.  
  65.          context.beginPath();
  66.          context.arc(700,100,50,0,(Math.PI)/2);
  67.          context.closePath();
  68.          context.fill();
  69.          context.stroke();
  70.  
  71.          //绘制扇形，思路很好！
  72.          context.beginPath();
  73.          context.strokeStyle="#F5F5F5";
  74.          context.moveTo(200,400);
  75.          context.arc(200,400,150,Math.PI*7/6,Math.PI*11/6);
  76.          context.fill();
  77.          context.stroke();
  78.          context.beginPath();
  79.          context.fillStyle="#F5F5F5";
  80.          context.strokeStyle="#F5F5F5";
  81.          context.moveTo(200,400);
  82.          context.arc(200,400,50,Math.PI*7/6,Math.PI*11/6);
  83.          context.fill();
  84.          context.stroke();
  85.          context.beginPath();
  86.          context.moveTo(200,400);
  87.          context.lineWidth=5;
  88.          context.arc(200,400,50,Math.PI*11/6,Math.PI*11/6);
  89.          context.stroke();
  90.  
  91.          context.beginPath();
  92.          context.lineWidth=1;
  93.          context.strokeStyle="#000000";
  94.          context.fillStyle="#000000";
  95.          context.font="40px 隶书";
  96.          context.strokeText("黄山",280,400);
  97.          context.fillText("天柱山",380,400);
  98.          context.strokeStyle="#FFFF00";
  99.          context.fillStyle="#00FFFF";
  100.          context.fillText("方特欢乐世界",500,400);
  101.          context.strokeText("方特欢乐世界",500,400);
  102.  
  103.          //线性渐变
  104.          g=context.createLinearGradient(100,450,300,300);
  105.          g.addColorStop(0,"#000000");
  106.          g.addColorStop(0.2,"#ffffff");
  107.          g.addColorStop(0.4,"#FF0000");
  108.          g.addColorStop(0.6,"#00ff00");
  109.          g.addColorStop(1,"#0000ff");
  110.          context.fillStyle=g;
  111.          context.fillRect(100,450,300,300)
  112.  
  113.          //放射性渐变
  114.          r=context.createRadialGradient(650,550,0,650,550,100);
  115.          r.addColorStop(0,"#000000");
  116.          r.addColorStop(0.2,"#ffffff");
  117.          r.addColorStop(0.4,"#FF0000");
  118.          r.addColorStop(0.6,"#00ff00");
  119.          r.addColorStop(1,"#0000ff");
  120.          context.fillStyle=r;
  121.          context.arc(650,550,100,0,Math.PI*2);
  122.          context.fill();
  123.  
  124.          //太极图
  125.          g1=context.createLinearGradient(40,920,320,920);
  126.          g1.addColorStop(0,"#000000");
  127.          g1.addColorStop(1,"#ffffff");
  128.  
  129.          g2=context.createLinearGradient(40,920,320,920);
  130.          g2.addColorStop(0,"#ffffff");
  131.          g2.addColorStop(1,"#000000");
  132.  
  133.          g3=context.createRadialGradient(120,1000,0,120,1000,10);
  134.          g3.addColorStop(0,"#ffffff");
  135.          g3.addColorStop(1,"#000000");
  136.  
  137.          g4=context.createRadialGradient(280,1000,0,280,1000,10);
  138.          g4.addColorStop(0,"#000000");
  139.          g4.addColorStop(1,"#ffffff");
  140.  
  141.          context.beginPath();
  142.          context.arc(200,1000,160,0,Math.PI);
  143.          context.arc(120,1000,80,0,Math.PI,true);
  144.          context.arc(280,1000,80,Math.PI,0,true);//没看懂为什么会反着颜色？
  145.          context.fillStyle=g1;
  146.          context.fill();//上面的疑问懂了：fill功能是把上面3个弧围成的区域填充！
  147.  
  148.          context.beginPath();
  149.          context.arc(200,1000,160,0,Math.PI,true);
  150.          context.arc(280,1000,80,0,Math.PI);
  151.          context.arc(120,1000,80,Math.PI,0);
  152.          context.fillStyle=g2;
  153.          context.fill();
  154.  
  155.          context.beginPath();
  156.          context.fillStyle=g3;
  157.          context.arc(120,1000,10,0,Math.PI*2);
  158.          context.fill();
  159.  
  160.          context.beginPath();
  161.          context.fillStyle=g4;
  162.          context.arc(280,1000,10,0,Math.PI*2);
  163.          context.fill();
  164.  
  165.          //设置文字阴影
  166.          context.shadowOffsetX=10;
  167.          context.shadowOffsetY=10;
  168.          context.shadowBlur=5;
  169.          context.shadowColor="red";
  170.          context.fillStyle="blue";
  171.          context.font="70px 隶书";
  172.          context.fillText("舌尖上的中国",400,700);
  173.  
  174.          //绘制饼图
  175.          context.beginPath();
  176.          context.shadowOffsetX=0;
  177.          context.fillStyle="black";
  178.          context.shadowColor="gray";
  179.          context.fillText("绘制饼图",400,800);
  180.          context.fillStyle="red";
  181.          context.moveTo(700,1000);
  182.          context.arc(700,1000,150,0,Math.PI/3);
  183.          context.fill();
  184.          context.closePath();//还可设closePath();
  185.          context.beginPath();
  186.          context.fillStyle="blue";
  187.          context.moveTo(700,1000);
  188.          context.arc(700,1000,150,Math.PI/3,Math.PI);
  189.          context.fill();
  190.          context.closePath();
  191.          context.beginPath();
  192.          context.fillStyle="green";
  193.          context.moveTo(700,1000);
  194.          context.arc(700,1000,150,Math.PI,Math.PI*5/3);
  195.          context.fill();
  196.          context.closePath();
  197.          context.beginPath();
  198.          context.fillStyle="yellow";
  199.          context.moveTo(700,1000);
  200.          context.arc(700,1000,150,Math.PI*5/3,Math.PI*2);
  201.          context.fill();
  202.          context.closePath();
  203.          context.fillStyle="black";
  204.          context.font="20px 隶书";
  205.          context.fillText("15%",750,1050);
  206.          context.fillText("35%",650,1050);
  207.          context.fillText("35%",650,950);
  208.          context.fillText("15%",750,950);
  209.      </script>
  210.  </body>
  211.  </html>

【HTML5】Canvas的更多相关文章

  1. 【HTML5】Canvas画布

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  2. 【HTML5】Canvas绘制基础

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  3. 【HTML5】Canvas 内部元素添加事件处理

    前言 canvas 没有提供为其内部元素添加事件监听的方法,因此如果要使 canvas 内的元素能够响应事件,需要自己动手实现.实现方法也很简单,首先获得鼠标在 canvas 上的坐标,计算当前坐标在 ...

  4. 【HTML5】Canvas图像

    把一幅图像放置到画布上, 使用以下方法: drawImage(Img,x,y); 注:这里的Img必须是一个图像对象.   显示一个canvas图像: <!DOCTYPE html> &l ...

  5. 【HTML5】canvas画布练习

    第一步:获取画布元素 var canvas = document.getElementById("myCanvas"); var context = canvas.getConte ...

  6. 【HTML5】Canvas 实现放大镜效果

    图片放大镜 效果 在线演示    源码 原理 首先选择图片的一块区域,然后将这块区域放大,然后再绘制到原先的图片上,保证两块区域的中心点一致, 如下图所示: 初始化 <canvas id=&qu ...

  7. 【HTML5】Canvas和SVG的区别

    * SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 ...

  8. 【HTML5】Canvas之globalCompositeOperation属性详解

    globalCompositeOperation即Canvas中的合成操作. 1.source-over 这是默认值,他表示绘制的图形将画在现有画布之上 <!DOCTYPE html> & ...

  9. 【HTML5】Canvas绘图详解-1

    ----->Canvas绘制基础 1,线条绘制 1-1,线条组成的图形和beginPath 案例:绘制由不同颜色的线条组成的图案 1-2,多边形的填充和closePath 案例:绘制封闭具有填充 ...

随机推荐

  1. java获取泛型信息

    总结一下java中获取与泛型相关的信息的知识,不如说是使用方法.网上也有很多类似的优秀文章,这里主要做一个知识的总结.通过反射获取泛型信息的常见例子: //bean package testProje ...

  2. jmockit学习总结

    mock类型和实例 从依赖的测试代码调用的方法和构造函数是mock(模拟)的目标. Mocking提供了我们需要的机制,以便将被测试的代码与(一些)依赖关系隔离开来.我们通过声明适当的模拟字段和/或模 ...

  3. SQL Server 初识游标

    ---恢复内容开始--- 游标:游标是一种能从包含多个数据的结果集每次提取一条的机制 游标的特点是: 检索得到的数据集更加灵活 可有针对性的对数据进行操作 拥有对数据进行删除和更新的能力 为何使用游标 ...

  4. 如何管理Session(防止恶意共享账号)——理论篇

    目录 知识要求 背景 技术原理 如何管理Session remember me的问题 附录 知识要求 有一定的WEB后端开发基础,熟悉Session的用法,以及与Redis.Database的配合 本 ...

  5. RecyclerView 加入一个滑动控件bug处理 GridView只显示第一行

    如果RecyclerView 多样式布局,比如要加入一个展示多个图看的需求.自然想到用gridview给嵌套一下. 想法当然是可以的,但是发现,嵌套出来的效果是,gridview只显示一行. 想想原因 ...

  6. C# tostring

    GUID: 即Globally Unique Identifier(全球唯一标识符) 也称作 UUID(Universally Unique IDentifier) . GUID是一个通过特定算法产生 ...

  7. 2734:十进制到八进制-poj

    总时间限制:  1000ms 内存限制:  65536kB 描述 把一个十进制正整数转化成八进制. 输入 一行,仅含一个十进制表示的整数a(0 < a < 65536). 输出 一行,a的 ...

  8. 物联网蓝牙模块：DA14586蓝牙5模块很快到来

    Dialog半导体的SmartBond系列的下一代产品---DA14586已经发布.该全新的系统级芯片(SoC)是公司首款支持最新蓝牙5.0规范的独立器件,为先进应用提供最低的功耗和无可比拟的功能. ...

  9. python-02 数据类型、字符编码、文件处理

    标准数据类型 Python3 中有六个标准的数据类型: Number(数字) String(字符串) List(列表) Tuple(元组) Sets(集合) Dictionary(字典) 数字 #整型 ...

  10. java基础部分的简单应用

    牛刀小试,MMP:嘿嘿,如有转载,请声明地址http://www.cnblogs.com/jinmoon/: 图形类,点类,三角形类,汽车类,接口:运用继承,抽象类,接口,多态:已知点类三点,输出三点 ...