<!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. Centos下安装php扩展sphinx

    官方地址:http://pecl.php.net/package/sphinx wget http://pecl.php.net/get/sphinx-1.3.3.tgz tar -zxvf sphi ...

  2. entity framework core在独立类库下执行迁移操作

    之前学习EFCore的时候,都是在VS创建的默认模板里面进行的,按照官方文档,直接就可以搞定. 今天新项目准备上.Net Core,打算先按照国际惯例,进行分层,数据访问层是用EFCore来做,于是就 ...

  3. 试着把.net的GC讲清楚(3)

    前两篇写的都是gc的一些概念和细节,这些东西对自己以后写代码有什么用,本篇我就准备将这些内容. root 第一篇文章中讲了GC在遍历存活对象的时候,都是从root开始的,root是一些对象的引用,例如 ...

  4. PhpStorm如何下载github上的代码到本地

    1.看着菜单栏有一个VCS(Virus Capture Scripter)集群服务器的选项,选择其下面的Checkout from Version Control,然后 (1)选择GIT:输入git的 ...

  5. Docker系列三：Docker容器管理

    Docker容器管理 1. 单一容器管理 1) 容器的启动 $ docker run --name gitlab-redis -d --volume /srv/docker/gitlab/redis: ...

  6. VNCServer，SSH Secure Shell Client,window远程控制linux

    1.VNC远程连接linux图形化桌面 2.SSH Secure Shell Client连接linux终端 3.设置FTP与linux传输文件 1.VNC远程连接linux图形化桌面 在centos ...

  7. Linux XZ压缩格式学习

    XZ的介绍   今天升级Python的时候,下载的Python-2.7.8.tar.xz安装包为xz格式,好吧,我又孤陋寡闻了,居然第一次遇见xz格式的压缩文件.搜索了一下资料,下面是xz的一些介绍: ...

  8. Android View绘制和显示原理简介

    现在越来越多的应用开始重视流畅度方面的测试,了解Android应用程序是如何在屏幕上显示的则是基础中的基础,就让我们一起看看小小屏幕中大大的学问.这也是我下篇文章--<Android应用流畅度测 ...

  9. JSP标签c:forEach报错（二）

    1.今天,我在用c标签写一些样例,结果出现一些错误,写下作为记录 具体错误如下: 三月 31, 2014 9:46:28 下午 org.apache.catalina.core.StandardWra ...

  10. 挖一挖不常用到而又很实用的重载-Split

    Split这个基本上所有的程序开发人员都用到,一般使用单字符和长字符串拆分字符串的较多,其实还有一个重载非常好用,那就是多种组合字符来进行拆分. 例如: "aaaaaaaaaa{@}bbbb ...