canvas 线性渐变

var linearG = pen.createLinearGradient(startX, startY, endX, endY);

  • 两点的连线,决定了渐变的方向,区间

var pen = myCanvas.getContext("2d");

// 1. 创建线性渐变

var linearG = pen.createLinearGradient(50, 50, 100, 100);

// 2. 添加渐变色

linearG = addColorStop(0, 'red');

linearG = addColorStop(0.5, 'green');

linearG = addColorStop(1, 'blue');

pen.beginPath();

pen.rect(50, 50, 50, 50);

pen.fill();

径向渐变

var pen = myCanvas.getContext("2d");

// 1. 创建径向渐变

var radialG = pen.createRadialGradient(200, 200, 50, 200, 200, 100);    // 圆心x,圆心y,半径,总是从第二个圆可是渐变

// 2. 添加渐变色

linearG = addColorStop(0, 'red');

linearG = addColorStop(0.5, 'green');

linearG = addColorStop(1, 'blue');

pen.beginPath();

pen.rect(0, 0, 400, 400);

pen.fill();

HTML5_canvas_线性渐变的更多相关文章

  1. 如何给SVG填充和描边应用线性渐变

    给SVG元素应用填充和描边有三种方法(戳这里学习SVG填充和描边的相关内容).你可以使用纯色.图案或渐变.前面两种方法我们之前已经讲过了,现在我们来讨论第三种方法——渐变. SVG提供了两种渐变——线 ...

  2. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(3)线性渐变

    线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: .test{ background:linear ...

  3. css线性渐变--linear-gradient

    使用css直接写渐变,对于现在而言,应该属于比价简单的一件事了,在一定程度上,扁平化的设计趋势的出现,减少了使用渐变色的场景,但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法. ...

  4. 使用CSS3线性渐变实现图片闪光划过效果

    <p class="overimg"> <a><img src="http://www.nowamagic.net/librarys/ima ...

  5. css3的背景颜色渐变@线性渐变

    背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...

  6. 深入理解CSS线性渐变linear-gradient

    × 目录 [1]定义 [2]渐变线 [3]色标 [4]重复渐变 [5]多背景 [6]应用场景 [7]IE兼容 前面的话 在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性 ...

  7. 颜色线性渐变-CAGradientLayer

    我们先来看一下效果图吧: 其实,就是一个颜色的线性渐变,使用CAGradientLayer很容易就能实现.由于代码很简单,就不做过多讲解了,直接看代码吧. import UIKit class Vie ...

  8. fillStyle线性渐变

    废话小说,沾待马 <!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>ca ...

  9. CSS3 Gradient线性渐变

    废话小说,看代码 <!DOCTYPE html > <html > <head> <meta charset="utf-8"> &l ...

随机推荐

  1. CMDB资产管理系统开发【day25】:windows客户端开发

    1.目录结构 PS Y:\MadkingClient> tree /f 卷 netgame 的文件夹 PATH 列表 卷序列号为 ACE3-896E Y:. ├─bin │ NedStark.p ...

  2. DirectX11 With Windows SDK--21 鼠标拾取

    前言 拾取是一项非常重要的技术,不论是电脑上用鼠标操作,还是手机的触屏操作,只要涉及到UI控件的选取则必然要用到该项技术.除此之外,一些类似魔兽争霸3.星际争霸2这样的3D即时战略游戏也需要通过拾取技 ...

  3. django - 总结 - CRM - 知识点

    1.扩展auth_user from django.contrib.auth.models import User,AbstractUser class UserInfo(AbstractUser): ...

  4. JavaScript 函数递归

    递归函数 递归函数是在一个函数通过名字调用自身的情况下构成的 项目中例如树状结构渲染,对象深复制,等很多方面都会使用到递归函数 function factorial(num){ if (num < ...

  5. Ubuntu解决没有可安装候选软件包

    解决方法:可以使用apt-cache search <package_name>寻找. 例如: E: 软件包 libqglviewer-dev 没有可安装候选 解决方法: apt-cach ...

  6. Linux Shell远程执行命令

    1.问题描述 经常需要远程到其他节点上执行一些shell命令,如果分别ssh到每台主机上再去执行很麻烦,下边介绍shell命令远程执行的方法. 前提: 远程电脑之间已经配置ssh免密码登陆 2.脚本方 ...

  7. Luogu P4321 随机漫游

    期望DP要倒着推 Luogu P4321 题意 LOJ #2542 不一定是树,询问点不一定均为1 $Solution$ 设计一个巧妙的DP状态 设$ F(S,x)$表示当前在点$ x$已经走遍了$ ...

  8. java web添加mysql过程中遇到的错误及解决办法

    问题一:遇到提示找不到驱动   com.mysql.jdbc.Driver 起初项目中是导入了mysql-connector-java-5.1.45-bin.jar 包的,但是一直依然报错,最后去官网 ...

  9. Beta冲刺(6/7)

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:beta冲刺(6/7) 团队部分 后敬甲(组长) 过去两天完成了哪些任务 ppt制作 视频拍摄 接下来的计划 准备答辩 ...

  10. Linux su切换用户后命令提示符变为bash-4.2$

    2018-9-30 19:31:41 星期日 今天遇到一个问题, 给gitlab配置webhook的时候, 一个目录总是不能正确执行git pull 命令, 无任何输出, 根据之前经验, 感觉是权限的 ...