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: 设置或返回用于 ...
随机推荐
- 微信支付之扫码支付、公众号支付、H5支付、小程序支付相关业务流程分析总结
前言 很久以来,一直想写一篇微信支付有关的总结文档:一方面是总结自己的一些心得,另一方面也可以帮助别人,但是因种种原因未能完全理解透彻微信支付的几大支付方式,今天有幸做一些总结上的文章,也趁此机会,将 ...
- bootstrap-table.min.js不同版本返回分页参数不同的问题
1.使用公司用的bootstrap-table.min.js ,刚开始bootstrap-table分页参数是这么写的 分页查询参数: 后端代码为: Result返回类的参数为list,以及total ...
- squid之------ACL控制
一.ACL概念 Squid提供了强大的代理控制机制,通过合理设置ACL(Access Control List,访问控制列表)并进行限制,可以针对源地址.目标地址.访问的URL路径.访问的时间等各 ...
- left semi join VS left join
left semi join VS left join思考: 建表 CREATE TABLE `kv1`( `k1` string, `v1` string) ROW FORMAT SERDE 'or ...
- pluginManagement的坑
想用protobuf-maven-plugin插件,用了<pluginManagement/>标签包裹<plugin/>,就引不进来,去掉就可以引进来.需要研究下. <b ...
- Redis实战(十七)Redis各个版本新特性
序言 Redis1.0 Redis2.0 Redis3.0 Redis4.0 Redis5.0 资料
- Module not found: Error: Can't resolve ' vue-resource'
问题: 在学习vue的过程中出现了这个问题,说明VueResource模块没有安装. 解决方法: 打开终端,进入当前项目所在目录,输入指令 npm install vue-resource --sav ...
- sqli-lab(16)
现实证明 英语好才能学渗透 基于bool类型的时间盲注 双引号 0X01爱之初体验 说实话我还没有找到 盲注的时候怎么判断闭合的方法 so 这里我直接看源码 这里的语句应该是 (“”)这种的闭合形式 ...
- php缓冲区
我理解的要点: 1.所有缓冲区控制是在一个PHP执行进程中发生的.如:你打开n个demo.php,他们之间开启和关闭缓冲是互不影响的. 2.output_buffering在程序中用ini_set是不 ...
- legend2---数据字段没有默认值错误:SQLSTATE[HY000]: General error: 1364 Field 'h_21_injury_limit' doesn't have a default value
legend2---数据字段没有默认值错误:SQLSTATE[HY000]: General error: 1364 Field 'h_21_injury_limit' doesn't have a ...