HTML5_canvas_线性渐变
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_线性渐变的更多相关文章
- 如何给SVG填充和描边应用线性渐变
给SVG元素应用填充和描边有三种方法(戳这里学习SVG填充和描边的相关内容).你可以使用纯色.图案或渐变.前面两种方法我们之前已经讲过了,现在我们来讨论第三种方法——渐变. SVG提供了两种渐变——线 ...
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(3)线性渐变
线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: .test{ background:linear ...
- css线性渐变--linear-gradient
使用css直接写渐变,对于现在而言,应该属于比价简单的一件事了,在一定程度上,扁平化的设计趋势的出现,减少了使用渐变色的场景,但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法. ...
- 使用CSS3线性渐变实现图片闪光划过效果
<p class="overimg"> <a><img src="http://www.nowamagic.net/librarys/ima ...
- css3的背景颜色渐变@线性渐变
背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...
- 深入理解CSS线性渐变linear-gradient
× 目录 [1]定义 [2]渐变线 [3]色标 [4]重复渐变 [5]多背景 [6]应用场景 [7]IE兼容 前面的话 在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性 ...
- 颜色线性渐变-CAGradientLayer
我们先来看一下效果图吧: 其实,就是一个颜色的线性渐变,使用CAGradientLayer很容易就能实现.由于代码很简单,就不做过多讲解了,直接看代码吧. import UIKit class Vie ...
- fillStyle线性渐变
废话小说,沾待马 <!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>ca ...
- CSS3 Gradient线性渐变
废话小说,看代码 <!DOCTYPE html > <html > <head> <meta charset="utf-8"> &l ...
随机推荐
- React 记录(6)
React文档:https://www.reactjscn.com/docs/react-component.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https://reac ...
- DirectX11 With Windows SDK--21 鼠标拾取
前言 拾取是一项非常重要的技术,不论是电脑上用鼠标操作,还是手机的触屏操作,只要涉及到UI控件的选取则必然要用到该项技术.除此之外,一些类似魔兽争霸3.星际争霸2这样的3D即时战略游戏也需要通过拾取技 ...
- [数学杂志]AML
Copied from: http://www.elsevier.com/journals/applied-mathematics-letters/0893-9659/guide-for-author ...
- 使用PHP中的ajax做登录页面、验证用户名是否可用、动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
- PL/SQl编程 基本语法
/*输出hello world*/ DECLARE BEGIN DBMS_OUTPUT.PUT_LINE('Hello World'); END; --set serveroutput on; /** ...
- vueRouter lazyLoad
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/hello/ind ...
- mysql 分库分表 ~ 柔性事务
一 定义 TCC方案是可能是目前最火的一种柔性事务方案二 具体 内容 TCC=try(预设)-confrim(应用确认)-canal(回滚取消)三 目的 解决跨服务调用场景下的分布式事务问题,避免使用 ...
- 记录一次Python下Tensorflow安装过程,1.7带GPU加速版本
最近由于论文需要,急需搭建Tensorflow环境,16年底当时Tensorflow版本号还没有过1,我曾按照手册搭建过CPU版本.目前,1.7算是比较新的版本了(也可以从源码编译1.8版本的Tens ...
- SQL中笛卡尔积-cross join的用法
在数学中,笛卡尔乘积是指两个集合X和Y的笛卡尓积(Cartesian product),又称直积,表示为X × Y,第一个对象是X的成员而第二个对象是Y的所有可能有序对的其中一个成员 假设集合A={a ...
- flume taidir to kafkasink
flume的数据源采用taiDir,sink类型选择kafka类型 测试目标:flume监控某一个目录的日志文件,并将文件存储到kafka中,在kafka的消费端可以实现数据的消费 dip005.di ...