在 HTML5 中，使用 Canvas API 绘制图形的知识，可以对绘制图形进行处理，包含使用 Canvas API 绘制渐变图形，使用 Canvas API 的坐标轴变换处理功能绘制变形图形。其中，左上方的点，为坐标轴原点（0,0）。

1、绘制渐变图形

 <!DOCTYPE html>
 <html>
 <head>
     <title></title>
     <script>
         function draw(id){
             var canvas = document.getElementById(id);
             var context = canvas.getContext("2d");
             var g1 = context.createLinearGradient(0,0,0,300);
             g1.addColorStop(0,"rgb(255,255,0)");
             g1.addColorStop(1,"rgb(0,255,255)");
             context.fillStyle = g1;
             context.fillRect(0,0,500,500);

             var g2 = context.createLinearGradient(0,0,300,0);
             g2.addColorStop(0,"rgba(0,0,255,0.5)");
             g2.addColorStop(1,"rgba(255,0,0,0.5)");
             for(var i=0;i<10;i++){
                 context.beginPath();
                 context.fillStyle = g2;
                 context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
                 context.closePath();
                 context.fill();
             }
         }
     </script>
 </head>
 <body onload="draw('canvas')">
     <!--LinearGradient
         context.createLinearGradient(xstart,ystart,xend,yend)
         addColorStop(offset,color)
         addColorStop(offset,color)
     -->
     <canvas id="canvas" width="500" height="500"></canvas>
 </body>
 </html>

2、绘制径向渐变

 <!DOCTYPE html>
 <html>
 <head>
     <title></title>
     <script>
         function draw(id){
             var canvas = document.getElementById(id);
             if(canvas==null){
                 return false;
             }
             var context = canvas.getContext("2d");
             var g1 = context.createRadialGradient(400,0,0,400,0,400);
             <!--6个参数：起始点的坐标，半径，结束点的坐标，半径-->
             g1.addColorStop(0.1,"rgb(255,255,0)");
             g1.addColorStop(0.3,"rgb(255,0,255)");
             g1.addColorStop(1,"rgb(0,255,255)");
             context.fillStyle = g1;
             context.fillRect(0,0,500,500);
         }
     </script>
 </head>
 <body onload="draw('canvas')">
     <canvas id="canvas" width="500" height="500"></canvas>
 </body>
 </html>

3、绘制变形图形

变形方式：平移、缩放、旋转

 <!DOCTYPE html>
 <html>
 <head>
     <title></title>
     <script>
         function draw(id){
             var canvas = document.getElementById(id);
             if(canvas==null){
                 return false;
             }
             var context = canvas.getContext("2d");
             context.fillStyle = "#eeeeef";
             context.fillRect(0,0,500,500);
             context.translate(200,50);

             context.fillStyle = "rgba(255,0,0,0.25)";
             for(var i=0;i<50;i++){
                 context.translate(25,25);
                 context.scale(0.95,0.95);
                 context.rotate(Math.PI/10);
                 context.fillRect(0,0,100,50);
             }
         }
     </script>
 </head>
 <body onload="draw('canvas')">
     <!--平移：translate(x,y) 缩放：scale(x,y)  旋转：rotate(deg)-->
     <canvas id="canvas" width="500" height="500"></canvas>
 </body>
 </html>

[html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形的更多相关文章

  1. [html5] 学习笔记-Canvas标签的使用

    Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...

  2. [html5] 学习笔记-Canvas应用

    通过使用HTML5游戏开发的引擎CreatJS,创建HTML5 Canvas上的更好交互. 1.认识CreateJS CreateJS是一个外部库,用它可以比Canvas更方便的绘制图形. 官网:ht ...

  3. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  4. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  5. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  7. [html] 学习笔记-Canvas图形绘制处理

    使用Canvas API 可以将一个图形重叠绘制在另外一个图形上,也可以给图形添加阴影效果. 1.Canvas 图形组合 通过 globalCompositeOperation = 属性 来指定重叠效 ...

  8. html5学习笔记：canvas

    1.什么是canvas? 可以绘制图形的标签.一般用javascript来绘制. 2.创建一个画布 <!DOCTYPE html> <html> <head> &l ...

  9. HTML5学习笔记之canvas

    标签 canvas标签有一个默认宽高:300*150: canvas的宽高一般写到行间样式中,写在style会有问题详细请看这里: 绘制环境 要绘图先要获取到绘制环境: var oC = docume ...

随机推荐

  1. Struts2不配置result参数 进行跳转实现

    的 this.getRequest().getRequestDispatcher("url").forward(this.getRequest(),this.getResponse ...

  2. Spring MVC Json数据传递

    json是一种常见的传递格式,是一种键值对应的格式.并且数据大小会比较小,方便传递.所以在开发中经常会用到json. 首先看一下json的格式: {key1:value1,key2:value2} 每 ...

  3. mongodb 分片群集(sharding cluster)

    实际环境架构 分别在3台机器运行一个mongod实例(称为mongod shard11,mongod shard12,mongod shard13)组织replica set1,作为cluster的s ...

  4. Arduino中hex文件的保存及应用（转）

    源:Arduino中hex文件的保存及应用 arduino在编译.链接.下载之后,hex文件自动删除了,造成软件仿真(如用proteus仿真)及其他单片机板应用的不便.以下是自己实践的小结,与大家分享 ...

  5. HDU 5652 India and China Origins

    二分答案+验证,注意一开始就不连通的话输出0 #include<cstdio> #include<cstring> #include<cmath> #include ...

  6. FireBug 调试工具(推荐)

    Firebug是网页浏览器 Mozilla Firefox 下的一款开发类扩展,如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利. 安装如下: 下面是 ...

  7. ANSI标准

    NSI:美国国家标准学会(AMERICAN NATIONAL STANDARDS INSTITUTE: ANSI)成立于1918年.当时,美国的许多企业和专业技术团体,已开始了标准化工作,但因彼此间没 ...

  8. 51驱动LCD12864

    LCD12864与LCD1602最大的区别在于LCD12864可以显示汉字,同时也可以拿来画图;当然,作为图形显示不推荐lcd12864,推荐NOKIA5110 12864引脚基本和1602的引脚吻合 ...

  9. 【转】国外程序员整理的Java资源大全

    Java几乎是许多程序员们的入门语言,并且也是世界上非常流行的编程语言.国外程序员Andreas Kull在其Github上整理了非常优秀的Java开发资源,推荐给大家.译文由ImportNew- 唐 ...

  10. 自己动手做聊天机器人 二十九-重磅：近1GB的三千万聊天语料供出

    Reference: http://www.shareditor.com/blogshow/?blogId=112 经过半个月的倾力打造,建设好的聊天语料库包含三千多万条简体中文高质量聊天语料,近1G ...