<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>渐变的矩形</title>

<script>

    window.onload = function(){

        var c = document.getElementById('c');

        var ctx = c.getContext('2d');

        //创建线型渐变对象

        var jb = ctx.createLinearGradient(,,,);

            jb.addColorStop(,'red');

            jb.addColorStop(.,'green');

            jb.addColorStop(.,'orange');

            jb.addColorStop(,'blue');

        ctx.fillStyle = jb;

        ctx.fillRect(,,,);      //x起点, y起点, x终点， y终点

    }

</script>

</head>

<body>

    <canvas id="c" width="" height="" ></canvas>

</body>

</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. HDU - 4545 字符串处理

    思路:对于每个字符,如果它能被替换一定要优先替换,其次再进行删除.遵循这个策略即可. 证明: 对于这题的第一个测试数据: abba addba 1 d b 当匹配到'b'  和 'd'时应该优先替换而 ...

  2. CodeForces-731A

    每次找到最短距离,然后更新指针的位置. AC代码: #include<cstdio> #include<cmath> const int maxn=100+5; char s[ ...

  3. java的mac自动化-自动运行java程序

    本文旨在帮助读者介绍,如果一个测试工程师拿到了mac本,该如何在本地自动运行java代码 首先如图所示写下如下一段代码 package zlr;import org.junit.Test;public ...

  4. AES对称加密

    import javax.crypto.Cipher; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.Secre ...

  5. Davinci DM6446开发攻略——linux-2.6.18移植

     TI DAVINCI 使用最新的内核是montavista linux-2.6.18,之前说过,国内很多公司,包括开发板的软件包,一直在使用montavista linux-2.6.10,这个版本准 ...

  6. 搜索引擎case︱从搜索序列文本看高端商务车︱统计之都

    朱雪宁(北京大学光华管理学院)               王汉生(北京大学光华管理学院) 摘要:本文对100万搜索引擎用户的13亿搜索序列文本进行探索分析,对高端车用户以及商学院人群做了描述对比,并 ...

  7. mongodb3.0分片及java代码连接操作测试（开启用户验证）

    最近抽时间搭建了一下mongodb简单的分片,整个过程还算是蛮顺利,只不过在用户验证这一块遇到了一些问题,好在最后终于搞定. 一.服务器搭建过程: 1.安装四个mongodb:一个作为config.一 ...

  8. php 连接mssql

    以前用的都是mysql,今天突然想用下mssql,起先用的是sql server200. 第一种方法 打开mssql.dll拓展.然后把mssql.secure_connection = off改为o ...

  9. 新工具︱微软Microsoft Visual Studio的R语言模块下载试用Ing...（尝鲜）

    笔者:前几天看到了以下的图片,着实一惊.作为R语言入门小菜鸟,还是觉得很好看,于是花了一点时间下载下来试用了一下,觉得还是挺高大上的. 就是英文不好是硬伤.下面贴给小白,我当时的下载步骤与遇见的问题. ...

  10. Java中过滤出字母、数字和中文的正则表达式

    1.Java中过滤出字母.数字和中文的正则表达式 (1)过滤出字母的正则表达式 [^(A-Za-z)] (2)过滤出数字的正则表达式 [^(0-9)] (3)过滤出中文的正则表达式 [^(\\u4e0 ...