在 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. [iOS]C语言技术视频-02-程序分支结构(if...else)

    下载地址: 链接: http://pan.baidu.com/s/1dREc2 密码: egbt

  2. [转] Eclipse 使用 Link 方式进行插件的安装

    下方来自 http://www.iteye.com/topic/1113353 Eclipse 的插件安装方法一般有以下几种(以安装 SVN 插件为例说明,Eclipse 版本为:3.7/Indigo ...

  3. mysql忘记密码及无法使用程序连接

    select(一)忘记root密码 很久之前装了mysql,后来做项目的时候,一直木有用到,就把密码给忘记了. 网上各种找,最终解决了这个问题了,记录下. 1)打开services,找到mysql服务 ...

  4. margin负值布局（一）

    搜索关键词:margin  负-100% 链接地址: 负margin用法权威指南 负边距(negative margin)实现自适应的div左右排版 <div class="cont& ...

  5. 利用智能手机(Android)追踪一块磁铁（转）

    利用智能手机(Android)追踪一块磁铁(一) 利用智能手机(Android)追踪一块磁铁(二) 利用智能手机(Android)追踪一块磁铁(三)

  6. windows server 2012 AD 活动目录部署系列（五）备份和还原域控制器

    在前篇博文中,我们介绍了用户资源的权限分配,用户只要在登录时输入一次口令,就能访问基于该域所分配给他的所有资源. 但是我们需要考虑一个问题:万一域控制器坏了怎么办?!如果这个域控制器损坏了,那用户登录 ...

  7. iOS开发——delegate的相关警告

    警告:Assigning to 'id<...Delegate>' from incompatible type '...ViewController *const_strong' 解决方 ...

  8. STM32_IAP详解(有代码,有上位机)

    Iap,全名为in applacation programming,即在应用编程,与之相对应的叫做isp,in system programming,在系统编程,两者的不同是isp需要依靠烧写器在单片 ...

  9. Spring Junit 读取WEB-INF下的配置文件

    假设Spring配置文件为applicationContext.xml 一.Spring配置文件在类路径下面 在Spring的java应用程序中,一般我们的Spring的配置文件都是放在放在类路径下面 ...

  10. JQuery EasyUI DataGrid 获取属性值

    在Jquery EasyUI中返回操作的时候,根据当前页返回到数据选取页: var grid = $('#datagrid'); var options = grid.datagrid('getPag ...