1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>渐变的矩形</title>
  6. <script>
  7.     window.onload = function(){
  8.         var c = document.getElementById('c');
  9.         var ctx = c.getContext('2d');
  10.         //创建线型渐变对象
  11.         var jb = ctx.createLinearGradient(,,,);
  12.             jb.addColorStop(,'red');
  13.             jb.addColorStop(.,'green');
  14.             jb.addColorStop(.,'orange');
  15.             jb.addColorStop(,'blue');
  16.         ctx.fillStyle = jb;
  17.         ctx.fillRect(,,,);      //x起点, y起点, x终点， y终点
  18.     }
  19. </script>
  20. </head>
  21. <body>
  22.     <canvas id="c" width="" height="" ></canvas>
  23. </body>
  24. </html>

canvas描绘渐变的矩形的更多相关文章

  1. H5新特性-canvas绘图--渐变对象路径(最复杂)--图片--变形操作

    今天的目标 3.1:canvas绘图--(重点掌握:渐变对象.路径.图片.变形) 3.2:canvas绘图--渐变对象 线性渐变: linearGradient 径向渐变: var g = ctx.c ...

  2. Canvas使用渐变之-径向渐变详解

    创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1)​ 一共​六个参数,分别代表: 起点的圆心坐标(第一个和第二个参数), 起点园的半径(第三个参数), 终点 ...

  3. canvas设置渐变

    canvas设置渐变 方法 createLinearGradient(x1, y1, x2, y2) 线性渐变 createRadialGradient(x1, y1, r1, x2, y2, r2) ...

  4. canvas放射性渐变填充

    今天在学习canvas时,遇到canvas的fillstyle有一个createRadialGradient()方法,创建放射性渐变. 上代码: <!DOCTYPE html> <h ...

  5. Canvas使用渐变之-线性渐变详解

    在canvas里面,除了使用纯色,我们还能把填充和笔触样式设置为渐变色:线性渐变和径向渐变. 线性渐变 createLinearGradient(x0,y0,x1,y1)  返回 CanvasGrad ...

  6. Canvas绘制渐变

    1.绘制线性渐变 Canvas提供了用于创建线性渐变的函数createLinearGradient(x0,y0,x1,y1),坐标点(x0,y0)是起点 ,(x1,y1)是终点 创建一个渐变色 var ...

  7. [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

    在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...

  8. Javascript高级编程学习笔记（92）—— Canvas(9) 渐变

    渐变 渐变由 canvasGradient 实例表示 要创建一个渐变对象需要调用 createLinearGradient() 方法 该方法接收四个参数: 起点的x坐标 起点的y坐标 终点的x坐标 终 ...

  9. html5 canvas 径向渐变2

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Shell脚本的基本流程控制

    if else read -p '请输入分数:' score if [ $score -lt 60 ]; then echo '60分以下' elif  [ $score -lt 70 ]; then ...

  2. 集成 solr6.5.1到 tomcat7（8） 中 （解决java.lang.NoSuchMethodError问题）

    ♣下载solr安装包 ♣安装solr ♣solr应用部署到tomcat下 ♣配置web.xml ♣在tomcat7启动 ♣改为在tomcat8启动 ♣在自带的Jetty里启动 ♣建立第一个Core 安 ...

  3. Google2016 面试题 吹气球 区间dp

    题意:有n个气球,编号为0到n-1,每个气球都有一个分数,存在nums数组中.每次吹气球i可以得到的分数为 nums[left] * nums[i] * nums[right],left和right分 ...

  4. soj3129: windy和水星 -- 水星数学家 2

    注意int的范围:-2147483648-2147483647 如果输入会出现溢出,这题应该就是卡的这里.其使用long long就不用考虑这个. 加深:如果输入的数是很多位,直接当做字符串处理即可. ...

  5. gogogo

  6. Centos小白学习

    目录 查看机器设备信息 有线网络设置(必须) 设置主机名(必须) 设置sudo用户,一般默认只有root可以使用(必须) yum更新源(必须) 安装完Centos后桌面宽度不能自适应 Centos安装 ...

  7. python介绍篇

    二进制编码ASSIC 每一个字符统一都需要8个bit来存储 计算机容量 1位 = 1bit 8bit = 1byte = 1字节 1024bytes = 1kbytes =1KB 1024个字符,小文 ...

  8. dojo单柱状图

    dojo单柱状图 1.dojo单柱状图源码 column.html: <!DOCTYPE HTML> <html lang="en"> <head&g ...

  9. 小白学爬虫-批量部署Splash负载集群

    整体目录如下: study@study:~/文档/ansible-examples$ tree Splash_Load_balancing_cluster Splash_Load_balancing_ ...

  10. CentOS修改root密码

    1.在系统启动时,按任意键中止启动 2.按E键修改系统启动文件 3.找到linux16开头的行,把整行ro后面内容删除,添加rd.break 4.Ctrl+X更改并重启 5.重新挂载/sysroot ...