在 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崩溃问题调试 signal SIGABRT&EXC_BAD_ACCESS

    在进行app开发过程中会遇到很多的问题,各种崩溃令人相当头疼.当然,解决bug的能力也体现了一个程序员的水平,现在来说一说开发中经常遇到的崩溃问题吧. 常见崩溃问题: 一是signal SIGABRT ...

  2. 日志文件 统计 网站PV IP

    1. 安装rrdtool yum install rrdtool 2. 创建 rrdtool 数据库 rrdtool create /opt/local/rrdtool/jicki.rrd -s 30 ...

  3. $_SERVER参数的含义

    $_SERVER是由服务器创建的,包含了头信息.参数.路径等信息,以下是一些键代表的含义: $_SERVER['PHP_SELF'] #当前正在执行脚本的文件名,与 document root相关.$ ...

  4. FZU 2098 刻苦的小芳

    这个问题转化一下就是求长度为2*n的正确括号匹配串,两个匹配的括号之间的距离不超过2*k的有几种. 假设左括号为1,右括号为-1,dp[i][j]表示长度为i的括号匹配串,前缀和为j的有几种.dp[2 ...

  5. IOS设计模式--代理 （委托）

    原文 http://blog.csdn.net/lovefqing/article/details/8270111 委托(delegate)也叫代理是iOS开发中常用的设计模式.我们借助于protoc ...

  6. python 日期格式化常用标记

    符号   说明             例子    %a  英文星期的简写 Mon  %A  英文星期的完整编写 Monday  %b  英文月份的简写 Jun  %B  英文月份的完整编写 June ...

  7. sae中thinkphp使用smarty

    因为最近在学thinkphp跟着做一个小商城. 没有使用thinkphp自带的think引擎,使用的是smarty引擎. 在sea中使用的时候出现了问题.已经是前几天的事了,问题图片没保存下来. 在网 ...

  8. ubuntu 设置主屏和副屏

    作为一个程序员,从开始使用双屏之后,一个显示屏开发,那种感觉,就是不好... 好吧,刚换到ubuntu,笔记本一个显示屏,外接了一个HDMI的显示器,由于书桌的位置,只有把HDMI的显示屏放在笔记本的 ...

  9. JS 响应式编程

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script ...

  10. 2.14. 删除托管对象（Core Data 应用程序实践指南）

    删除托管对象,只要调用托管对象上下文的deleteObject 或 deleteObjects就可以了.同样,真正的删除,要在调用save:之后.