canvas放射性渐变填充
今天在学习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放射性渐变填充的更多相关文章
- H5新特性-canvas绘图--渐变对象路径(最复杂)--图片--变形操作
今天的目标 3.1:canvas绘图--(重点掌握:渐变对象.路径.图片.变形) 3.2:canvas绘图--渐变对象 线性渐变: linearGradient 径向渐变: var g = ctx.c ...
- canvas 实现渐变色填充的三角形
实现效果 效果一: 效果二: 实现思路 canvas实现 1. 绘制三角形 // html <canvas id="triangle" width="30" ...
- Canvas使用渐变之-径向渐变详解
创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1) 一共六个参数,分别代表: 起点的圆心坐标(第一个和第二个参数), 起点园的半径(第三个参数), 终点 ...
- canvas设置渐变
canvas设置渐变 方法 createLinearGradient(x1, y1, x2, y2) 线性渐变 createRadialGradient(x1, y1, r1, x2, y2, r2) ...
- [Xcode 实际操作]二、视图与手势-(7)UIView视图的渐变填充
目录:[Swift]Xcode实际操作 本文将演示创建一个具有渐变填充色的图形 import UIKit class ViewController: UIViewController { overri ...
- Qt 2D绘图之一:基本图形绘制和渐变填充
Qt中提供了强大的2D绘图系统,可以使用相同的API在屏幕和绘图设备上进行绘制,它主要基于QPainter.QPaintDevice和QPaintEngine这三个类.它们三者的关系如下图所示: QP ...
- Qt之图形(渐变填充)
简述 QGradient可以和QBrush组合使用,来指定渐变填充. Qt目前支持三种类型的渐变填充: QLinearGradient:显示从起点到终点的渐变. QRadialGradient:以圆心 ...
- html5 canvas 多个填充渐变形状
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Canvas使用渐变之-线性渐变详解
在canvas里面,除了使用纯色,我们还能把填充和笔触样式设置为渐变色:线性渐变和径向渐变. 线性渐变 createLinearGradient(x0,y0,x1,y1) 返回 CanvasGrad ...
随机推荐
- js实现右侧的分享效果
就是当鼠标移到上面的时候,他会出现,鼠标移出就消失. nmouseover和nmouseout就能实现 <style> *{padding:0;margin:0;} #s1{width:2 ...
- Spring MVC入门知识总结
2.1.Spring Web MVC是什么 Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职 ...
- 2016-08-05:samba服务器配置
centos samba服务器配置 配置smb.conf文件 [share] path = /home/lee writable = yes 添加smb用户 smbpasswd -a root 启动s ...
- 使用虚幻引擎中的C++导论(三-反射系统与迭代器)
使用虚幻引擎中的C++导论(三) 第一,这篇是我翻译的虚幻4官网的新手编程教程,原文传送门,有的翻译不太好,但大体意思差不多,请支持我O(∩_∩)O谢谢. 第二,某些细节操作,这篇文章省略了,如果有不 ...
- TJI读书笔记10-复用类
TJI读书笔记10-复用类 组合语法 继承语法 代理 final关键字 final的数据 final的参数 final的方法 final的类 初始化和类的加载 乱七八糟不知道怎么归类的知识点 代码复用 ...
- Java、Android 开发环境搭建
一.准备工作 为便于管理,将java开发工具集中到一个文件夹中.创建D:\javaDevE文件夹,JDK.Android-SDK.Eclipse.tomcat等都可以安装到这个文件夹中. 二.搭建Ja ...
- PHP 用html方式输出Excel文件时的数据格式设置
1) 文本:vnd.ms-excel.numberformat:@ 2) 日期:vnd.ms-excel.numberformat:yyyy/mm/dd 3) 数字:vnd.ms-excel.numb ...
- Dictionary和IDictionary
Dictionary<string> s = new Dictionary<string>(); 这个是s是Dictionary类型.是个类 类型,实现了接口,提供了更多的方法 ...
- struts2各个jar包的作用
---------------------------------------------------struts2核心jar包------------------------------------ ...
- pip使用
安装指定版本的插件: pip install -v matplotlib==1.5.1 #安装matplotlib version 1.5.1