在 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. Xcode 6配置里定义${ARCHS_STANDARD}为armv7, arm64以及错误

    转发:http://www.cocoachina.com/ios/20141013/9897.html 最近一次的Xcode 6更新默认不再支持arm7s架构,究竟是要废除不用呢还是仅仅只是一个疏忽? ...

  2. iOS之NSDictionary和NSArray以及NSMutableDictionary和NSMutableArray：将不再是问题

    字典的key就相当于数组的下标,怎样操作数组你就学会了怎样才做字典:来感受一把 需要注意的是读取文件的类型要集合.plist文件的rooty:否则将不能读入文件 // 1.全国省市:得到的是省和市 / ...

  3. 内置Web Server

    在终端输入命令:php -S localhost:8000 -t xxx(某个目录或文件) 这个内置的Web服务器主要用于本地开发使用,不可用于线上产品环境. URI请求会被发送到PHP所在的的工作目 ...

  4. libconfig第一篇———使用指南

    官网:http://www.hyperrealm.com/libconfig/ 1 libconfig是什么? Libconfig是一个结构化的配置文件库,它可以定义一些配置文件,例如test.cfg ...

  5. spring调用mongodb

    1.环境 Jdk:1.6.0_10-rc2 Spring3.1.2  下载 依赖jar文件: 2.相关配置 ①.spring配置文件 <?xml version="1.0" ...

  6. 【 bzoj4537】HNOI2016 最小公倍数

    首先将边按a的值分组,每$\sqrt{m}$一组. 对于每一组,将符合一组a的询问选出来,将这些询问和这一块之前的边(a一定小于这些询问)按b排序,然后交替插入,询问,对于一个询问,在当前块也有可能有 ...

  7. objective-c之各种数值

    各种数值 NSArray和NSDictionary都只能存储对象,不能存储任何基本类型的数据,如int,float,struct.因此我们可以用对象来封装基本的数值. NSNumber Cocoa提供 ...

  8. iOS 生产证书

    首先登陆https://developer.apple.com(99美元账号) 选择iOS Developer program 板块下的 Certificates,Identifiers & ...

  9. Memcached源码分析之thread.c

    /* * 文件开头先啰嗦几句: * * thread.c文件代表的是线程模块.但是你会看到这个模块里面有很多其它方法, 例如关于item的各种操作函数,item_alloc,item_remove,i ...

  10. Led控件

    在 WindowMobile 上的模拟LED 显示屏插件 一个简单Led控件 一个经典的控制Led的单片机程序 Led控件(2)——Led显示屏模拟