<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <style type="text/css">

         canvas{background: #F5F5F5}

     </style>

 </head>

 <body>

     <canvas id="canvas1" width="900" height="1200">

         当前浏览器不支持canvas

     </canvas>

     <script type="text/javascript">

         var canvas=document.getElementById('canvas1');//定义变量获取画布DOM

         var context=canvas.getContext('2d');//设置绘图环境为2d

         context.lineWidth=4;

         context.strokeStyle="#FF00FF";

         context.moveTo(200,100);

         context.lineTo(200,200);

         context.lineTo(250,200);

         context.lineTo(250,150);

         context.lineTo(150,150);

         context.lineTo(150,200);

         context.lineTo(200,200);

         context.lineTo(200,250);

         //context.closePath();//从当前点回到起始点来封闭路径

         context.stroke();

         //绘制矩形

         context.beginPath();//此句不能省，否则上面的图样式会受下面的设置影响

         context.lineWidth=2;

         context.strokeStyle="#0000FF";

         context.rect(260,100,50,20) //语句结尾分号;可省

         context.stroke();

         context.beginPath();

         context.strokeRect(320,100,50,30);

         context.beginPath();

         context.lineWidth=2;

         context.fillStyle="#FF0000";

         context.rect(380,100,40,20);

         context.fill();

         context.beginPath();

         context.lineWidth=2;

         context.fillStyle="#00FF00";

         context.fillRect(430,100,50,50);

         context.beginPath();

         context.lineWidth=3;

         context.arc(500,200,50,0,(Math.PI)/2);//默认false顺时针，可设置true逆时针

         context.stroke();

         context.beginPath();

         context.lineWidth=3;

         context.arc(600,200,50,0,(Math.PI)/2);//默认false顺时针，可设置true逆时针

         context.fill();

         context.stroke();

         context.beginPath();

         context.arc(600,100,50,0,(Math.PI)/2);

         context.stroke();

         context.beginPath();

         context.arc(700,100,50,0,(Math.PI)/2);

         context.closePath();

         context.fill();

         context.stroke();

         //绘制扇形，思路很好！

         context.beginPath();

         context.strokeStyle="#F5F5F5";

         context.moveTo(200,400);

         context.arc(200,400,150,Math.PI*7/6,Math.PI*11/6);

         context.fill();

         context.stroke();

         context.beginPath();

         context.fillStyle="#F5F5F5";

         context.strokeStyle="#F5F5F5";

         context.moveTo(200,400);

         context.arc(200,400,50,Math.PI*7/6,Math.PI*11/6);

         context.fill();

         context.stroke();

         context.beginPath();

         context.moveTo(200,400);

         context.lineWidth=5;

         context.arc(200,400,50,Math.PI*11/6,Math.PI*11/6);

         context.stroke();

         context.beginPath();

         context.lineWidth=1;

         context.strokeStyle="#000000";

         context.fillStyle="#000000";

         context.font="40px 隶书";

         context.strokeText("黄山",280,400);

         context.fillText("天柱山",380,400);

         context.strokeStyle="#FFFF00";

         context.fillStyle="#00FFFF";

         context.fillText("方特欢乐世界",500,400);

         context.strokeText("方特欢乐世界",500,400);

         //线性渐变

         g=context.createLinearGradient(100,450,300,300);

         g.addColorStop(0,"#000000");

         g.addColorStop(0.2,"#ffffff");

         g.addColorStop(0.4,"#FF0000");

         g.addColorStop(0.6,"#00ff00");

         g.addColorStop(1,"#0000ff");

         context.fillStyle=g;

         context.fillRect(100,450,300,300)

         //放射性渐变

         r=context.createRadialGradient(650,550,0,650,550,100);

         r.addColorStop(0,"#000000");

         r.addColorStop(0.2,"#ffffff");

         r.addColorStop(0.4,"#FF0000");

         r.addColorStop(0.6,"#00ff00");

         r.addColorStop(1,"#0000ff");

         context.fillStyle=r;

         context.arc(650,550,100,0,Math.PI*2);

         context.fill();

         //太极图

         g1=context.createLinearGradient(40,920,320,920);

         g1.addColorStop(0,"#000000");

         g1.addColorStop(1,"#ffffff");

         g2=context.createLinearGradient(40,920,320,920);

         g2.addColorStop(0,"#ffffff");

         g2.addColorStop(1,"#000000");

         g3=context.createRadialGradient(120,1000,0,120,1000,10);

         g3.addColorStop(0,"#ffffff");

         g3.addColorStop(1,"#000000");

         g4=context.createRadialGradient(280,1000,0,280,1000,10);

         g4.addColorStop(0,"#000000");

         g4.addColorStop(1,"#ffffff");

         context.beginPath();

         context.arc(200,1000,160,0,Math.PI);

         context.arc(120,1000,80,0,Math.PI,true);

         context.arc(280,1000,80,Math.PI,0,true);//没看懂为什么会反着颜色？

         context.fillStyle=g1;

         context.fill();//上面的疑问懂了：fill功能是把上面3个弧围成的区域填充！

         context.beginPath();

         context.arc(200,1000,160,0,Math.PI,true);

         context.arc(280,1000,80,0,Math.PI);

         context.arc(120,1000,80,Math.PI,0);

         context.fillStyle=g2;

         context.fill();

         context.beginPath();

         context.fillStyle=g3;

         context.arc(120,1000,10,0,Math.PI*2);

         context.fill();

         context.beginPath();

         context.fillStyle=g4;

         context.arc(280,1000,10,0,Math.PI*2);

         context.fill();

         //设置文字阴影

         context.shadowOffsetX=10;

         context.shadowOffsetY=10;

         context.shadowBlur=5;

         context.shadowColor="red";

         context.fillStyle="blue";

         context.font="70px 隶书";

         context.fillText("舌尖上的中国",400,700);

         //绘制饼图

         context.beginPath();

         context.shadowOffsetX=0;

         context.fillStyle="black";

         context.shadowColor="gray";

         context.fillText("绘制饼图",400,800);

         context.fillStyle="red";

         context.moveTo(700,1000);

         context.arc(700,1000,150,0,Math.PI/3);

         context.fill();

         context.closePath();//还可设closePath();

         context.beginPath();

         context.fillStyle="blue";

         context.moveTo(700,1000);

         context.arc(700,1000,150,Math.PI/3,Math.PI);

         context.fill();

         context.closePath();

         context.beginPath();

         context.fillStyle="green";

         context.moveTo(700,1000);

         context.arc(700,1000,150,Math.PI,Math.PI*5/3);

         context.fill();

         context.closePath();

         context.beginPath();

         context.fillStyle="yellow";

         context.moveTo(700,1000);

         context.arc(700,1000,150,Math.PI*5/3,Math.PI*2);

         context.fill();

         context.closePath();

         context.fillStyle="black";

         context.font="20px 隶书";

         context.fillText("15%",750,1050);

         context.fillText("35%",650,1050);

         context.fillText("35%",650,950);

         context.fillText("15%",750,950);

     </script>

 </body>

 </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. Django 入门案例开发（下）——创建项目应用及模型类

    前面两章是在已经开发好的项目上用来描述环境和业务,这一章创建一个全新的项目来用作开发,你可以跟着我的步骤进行开发,如果有不理解的地方可以给我留言. 今天的任务是创建好项目和用户(users)应用及让它 ...

  2. MVC-1(javabean+jsp+servlet+jdbc)

    这是一篇最初版本的mvc设计模式的demo.路要一步一步走,弄明白这其中的逻辑,对后面掌握ssh,ssm等框架大有裨益. 计算机系的同学们也要为毕设做准备了,希望可以帮你们迈出自己做毕设的第一步(微笑 ...

  3. SQL Server 初识游标

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

  4. 《Metasploit魔鬼训练营》虚拟环境搭建中网络配置的一些问题

    直接使用网上下载与书本配套的虚拟机环境,发现NAT服务器10.10.10.254(192.168.10.254)虽然可以和其他虚拟机ping通,但是连不上网.自然windows xp靶机也连不上网了. ...

  5. C++雾中风景3：const用法的小结

    const作为C与C++共有的关键字,很多使用的方式大同小异.但由于C++是一门面向对象的语言,在类和对象中有更多的使用规则.之前学习C语言的时候就被const这个关键字搅得焦头烂额,正巧也借这篇文章 ...

  6. SQLServer2008数据库连接error40错误

    在连接SQL Server偶尔会遇到报错,如在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误.未找到或无法访问服务器.请验证实例名称是否正确并且 SQL Server 已配置为 ...

  7. c#使用PortableDeviceApiLib读取便携式设备(WPD:Windows Portable Devices)信息

    相关名词解释: WPD( Windows Portable Devices) 译作Windows 便携设备 (WPD) 是一种驱动程序技术,可支持广泛的可移动设备,比如移动电话.数码相机和便携媒体播放 ...

  8. tensorflow初探

    TensorFlow是一个采用数据流图,用于数值计算的开源软件库.自己接触tensorflow比较的早,可是并没有系统深入的学习过,现在TF在深度学习已经成了"标配",所以打算系统 ...

  9. 【二十二】mysqli事务处理

    事务处理 事务基本原理 如果不开启事务,执行一条sql,马上会持久化数据.可见:默认的mysql对sql语句的执行是自动提交的! 如果开启了事务,就是关闭了自动提交的功能,改成了commit执行自动提 ...

  10. MySql的技术规范-企业版(来源于MySql官网)

    MySQL技术规范 Oracle MySQL云服务 MySQL数据库即服务 灵活的架构 开源 多线程 可插拔的存储引擎架构 InnoDB,NDB集群 MyISAM,合并,内存,存档 ANSI SQL标 ...