Canvas入门05-渐变颜色
线性渐变API:
offset是介于0~1.0之间的double值,代表颜色停止点在渐变色上的位置;color 是CSS3 颜色字符串。
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
gradient = context.createLinearGradient(0, 0, canvas.width, 0);
// 线性渐变
gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.25, 'white');
gradient.addColorStop(0.5, 'purple');
gradient.addColorStop(0.75, 'red');
gradient.addColorStop(1, 'yellow'); context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
显示效果:
放射渐变API:
ctx.createRadialGradient(x1: number, x2: number, r1: number, x2: number, y2: number, r2: number) 创建一个放射渐变实例
利用两圆分离的原理,可形成放射性扇形。
x1:起始圆的x坐标
x2:起始圆的y坐标
r1:起始圆的半径
x2:终止圆的x坐标
y2:终止圆的y坐标
r2:终止圆的半径
同线性渐变。
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
gradient = context.createRadialGradient(canvas.width/2, canvas.height, 10, canvas.width/2, 0, 100); gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.25, 'white');
gradient.addColorStop(0.5, 'purple');
gradient.addColorStop(0.75, 'red');
gradient.addColorStop(1, 'yellow'); context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
效果:
Canvas入门05-渐变颜色的更多相关文章
- Canvas入门(2):图形渐变和图像形变换
来源:http://www.ido321.com/986.html 一.图形渐变(均在最新版Google中测试) 1.绘制线性渐变 1: // 获取canvas 的ID 2: var canvas = ...
- HTML5 canvas入门
HTML5 Canvas入门 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. ...
- Canvas 入门案例
五. Canvas 入门案例 1. canvas 圆形绘制 <!DOCTYPE html> <html lang="en"> <head> ...
- win2d 渐变颜色
本文告诉大家如何在 win2d 使用渐变颜色 线条渐变 在 UWP 的 Win2d 使用渐变颜色需要 CanvasLinearGradientBrush 做颜色,本文告诉大家如何在 win2d 使用 ...
- Canvas入门(3):图像处理和绘制文字
来源:http://www.ido321.com/997.html 一.图像处理(非特别说明,所有结果均来自最新版Google) 在HTML 5中,不仅可以使用Canvas API绘制图形,也可以用于 ...
- Canvas入门(1):绘制矩形、圆、直线、曲线等基本图形
来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...
- Canvas入门(3):图像处理和渲染文本
资源:http://www.ido321.com/997.html 一.图像处理(非特别说明,全部结果均来自最新版Google) 在HTML 5中,不仅能够使用Canvas API绘制图形,也能够用于 ...
- canvas入门之时钟的实现
canvas 入门之作: 三步实现一个时钟: 直接上效果: step 1 : 背景制作首先制作从1-12的数字: var canvas = document.getElementById('ca ...
- Canvas入门到高级详解(中)
三. canvas 进阶 3.1 Canvas 颜色样式和阴影 3.1.1 设置填充和描边的颜色(掌握) fillStyle : 设置或返回用于填充绘画的颜色 strokeStyle: 设置或返回用于 ...
随机推荐
- sevlet
https://blog.csdn.net/Mithrandir_One/article/details/52900425 大家现在做的比较多的基本上就是 web 应用.所以一定要把 sevlet 及 ...
- spark性能调优点(逐步完善)
1.使用高性能序列化类库2.优化数据结构3.对多次使用的RDD进行持久化/CheckPoint4.使用序列化的持久化级别5.Java虚拟机垃圾回收调优 降低RDD缓存占用空间的比例:new Spark ...
- markdown编辑器常用命令
# 标题H1## 标题H2### 标题H3#### 标题H4##### 标题H5###### 标题H5插入java代码: 以```java表示java代码开始,以```表示代码结束 ```javapu ...
- 14.django返回展示一张图片
urlpatterns = [ path('admin/', admin.site.urls), # 使用django返回一张土图片的时候需要间接的访问一个中间接口,是html页面的中的img的src ...
- SpringBoot配置文件优先级加载顺序
- 3D Computer Grapihcs Using OpenGL - 13 优化矩阵
上节说过矩阵是可以结合的,而且相乘是按照和应用顺序相反的顺序进行的.我们之前初始化translationMatrix和rotationMatrix的时候,第一个参数都是使用的一个初始矩阵 glm::m ...
- linux grep 正则
grep : 显示匹配行 -v: 反显示 -e 使用扩展正则表达式 黑色字体表明是原生正则表达式 红色字体表明是扩张正则表达式 1.匹配操作符 \: 转义字符串(正则使用扩展字符操作 没有使用-e ...
- 读写锁StampedLock的思想
该类是一个读写锁的改进,它的思想是读写锁中读不仅不阻塞读,同时也不应该阻塞写. 读不阻塞写的实现思路: 在读的时候如果发生了写,则应当重读而不是在读的时候直接阻塞写! 因为在读线程非常多而写线程比较少 ...
- 后盾网lavarel视频项目---2、phpstorm显示类中的方法快捷键
后盾网lavarel视频项目---2.phpstorm显示类中的方法快捷键 一.总结 一句话总结: ctrl + f12 1.npm安装js插件? npm install hdjs 2.phpstor ...
- jQuery.parseJSON()
https://api.jquery.com/jQuery.parseJSON/ https://api.jquery.com/category/deprecated/deprecated-3.0/ ...