今天在学习canvas时，遇到canvas的fillstyle有一个createRadialGradient()方法，创建放射性渐变。

上代码：

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

var c=document.getElementById("myCanvas");

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

var grd=ctx.createRadialGradient(70,70,0,90,90,30);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

ctx.fillStyle=grd;

ctx.fillRect(0,0,300,150);

</script>

</body>

</html>

其中createRadialGradient有五个参数：

var grd=ctx.createRadialGradient(70,70,0,90,90,30);

分别为：开始圆的 X 坐标、开始圆的 Y 坐标、开始圆的半径、结束圆的 X 坐标、结束圆的 Y 坐标、结束圆的半径。（坐标都是相对于canvas画布的值）

ctx.fillRect(0,0,300,150);

这一句的几个参数是需要填充的位置： 矩形左上角 X 坐标、 Y 坐标、 右下角 X 坐标、Y 坐标。（上次编辑是理解错误，后两个参数不对，w3school上解释如下图：）

正常情况下，开始圆的圆心在结束圆范围内时，效果入下：

var grd=ctx.createRadialGradient(70,70,0,90,90,50);

开始圆的圆心偏移，中间的深色部分偏移。偏移到结束圆边界时，效果入下：

var grd=ctx.createRadialGradient(55,55,0,90,90,50);

当开始圆圆心坐标位于结束圆范围外时，出现特殊现象：

var grd=ctx.createRadialGradient(40,40,0,90,90,50);

偏移越多，效果越明显：

var grd=ctx.createRadialGradient(20,20,0,90,90,50);

一开始看到这个效果感到很奇怪。弄明白后觉得可能以后用得到，记录一下。

canvas放射性渐变填充的更多相关文章

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

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

  2. canvas 实现渐变色填充的三角形

    实现效果 效果一: 效果二: 实现思路 canvas实现 1. 绘制三角形 // html <canvas id="triangle" width="30" ...

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

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

  4. canvas设置渐变

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

  5. [Xcode 实际操作]二、视图与手势-(7)UIView视图的渐变填充

    目录:[Swift]Xcode实际操作 本文将演示创建一个具有渐变填充色的图形 import UIKit class ViewController: UIViewController { overri ...

  6. Qt 2D绘图之一：基本图形绘制和渐变填充

    Qt中提供了强大的2D绘图系统,可以使用相同的API在屏幕和绘图设备上进行绘制,它主要基于QPainter.QPaintDevice和QPaintEngine这三个类.它们三者的关系如下图所示: QP ...

  7. Qt之图形（渐变填充）

    简述 QGradient可以和QBrush组合使用,来指定渐变填充. Qt目前支持三种类型的渐变填充: QLinearGradient:显示从起点到终点的渐变. QRadialGradient:以圆心 ...

  8. html5 canvas 多个填充渐变形状

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

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

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

随机推荐

  1. 剑指Offer:面试题19——二叉树的镜像(java实现)

    问题描述: 操作给定的二叉树,将其变换为源二叉树的镜像. 二叉树结点定义为: public class TreeNode { int val = 0; TreeNode left = null; Tr ...

  2. MyBatis学习总结(二)——使用MyBatis对表执行CRUD操作

    上一篇博文MyBatis学习总结(一)——MyBatis快速入门中我们讲了如何使用Mybatis查询users表中的数据,算是对MyBatis有一个初步的入门了,今天讲解一下如何使用MyBatis对u ...

  3. mysql的时间转化

    1.1 获得当前日期+时间(date + time)函数:now() 除了 now() 函数能获得当前的日期时间外,MySQL 中还有下面的函数: current_timestamp()   curr ...

  4. 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解

    CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...

  5. JavaScript 常用算法

    1.排序算法 (1)冒泡排序,冒泡排序其实就是通过比较相邻位置的元素大小,如果左边比右边大,就交换位置,继续比较,实际上就是每轮比较都得出一个最大值,然后通过多伦比较得出. function bubb ...

  6. dba管理

    ORACLE 锁表的解决方法及查找引起锁表SQL语句方法  1. ORACLE中查看当前系统中锁表情况 select * from v$locked_object 可以通过查询v$locked_obj ...

  7. g++与c++扩栈方法

    g++: /* * Problem: * Author: SHJWUDP * Created Time: 2015/8/5 星期三 15:54:42 * File Name: tmp.cpp * St ...

  8. Linux中安装和使用rz、sz命令

    安装命令: yum install lrzsz 从服务端发送文件到客户端: sz filename 从客户端上传文件到服务端: rz在弹出的框中选择文件,上传文件的用户和组是当前登录的用户 Secur ...

  9. 《机器学习实战》学习笔记——第14章 利用SVD简化数据

    一. SVD 1. 基本概念: (1)定义:提取信息的方法:奇异值分解Singular Value Decomposition(SVD) (2)优点:简化数据, 去除噪声,提高算法的结果 (3)缺点: ...

  10. 第一次正式小用Redis存储

    由于要做一个同一个页面上多种图表数据的下载,考虑到Azure上面的session很不稳定(可用Redis provider存储session,较稳定),故决定改为Azure支持的Redis,顺便也学习 ...