canvas渐变
代码:
1 /**
2 * Created by Administrator on 2016/1/29.
3 */
4 function draw(id){
5 var canvas = document.getElementById(id);
6 var context = canvas.getContext("2d");
7 // var grd = context.createLinearGradient(0,0,300,0);
8 var grd = context.createRadialGradient(50,50,0,100,100,90);
9 grd.addColorStop(0,"#ff0000");
10 grd.addColorStop(0.5,"#ff6100");
11 grd.addColorStop(1,"#0000ff");
12 context.fillStyle = grd;
13 context.fillRect(0,0,300,300);
14 }
用到的方法createLinearGradient(),createRadialGradient(),addColorStop()。
1) createLinearGradient()绘制线性渐变。
线性渐变:在起始点和结束点之间插入颜色值。
格式:createLinearGradient(xStart,yStart,xEnd,yEnd):一个起始坐标点,一个结束坐标点。
2) createRadialGradient()绘制径向渐变。
径向渐变:在两个圆的圆周之间放射性地插入颜色值。
格式:createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd):一个起始点及其半径,一个结束点及其半径。
3) addColorStop()为渐变添加颜色。
addColorStop(offset,color):offset表示渐变的改变点在哪,范围为0~1。color是颜色值。
canvas渐变的更多相关文章
- canvas 渐变
那么第一种渐变方式就是LinearGradient,具体实施就是以下代码: var colorStyle=context.createLinearGradient(0,0,0,HEIGHT); col ...
- Html5学习2(Html表格、Html列表、Html5新元素、Canvas (坐标、路径、画圆、文本、渐变、图像))
Html表格 1.表格中的表头:<th></th>.其中表头部分字体加粗,颜色深绿色 <h4>水平标题:</h4> <table border=& ...
- canvas插入图片设置背景,渐变
##在canvas中插入图片(需要image对象) 1.canvas操作图片时,必须要等图片加载完才能操作 2.drawImage(image, x, y, width, height) 其中 ima ...
- HTML5 <canvas> 基础学习
HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形 创建一个画布( ...
- HTML5 Canvas | w3cschool菜鸟教程
HTML5 Canvas <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.. 在画布上(Canvas)画一个红色矩形,梯度矩形,彩色矩形,和一些彩色的文字. ...
- HTML5 新元素、HTML5 Canvas
HTML5 新元素 自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义. 为了更好地处理今天的互联网应用,HT ...
- 关于H5的Canvas
1.什么是canvas? <canvas>标签是h5新增的,通过脚本(通常是js)来绘制图形,canvas只是一个图形容器,或者说是画布. canvas可以绘制路径.图形.字以及添加图像. ...
- HTML5 学习02——新元素:canvas
HTML5 Canvas <canvas>标签:使用脚本 (通常是JavaScript)来绘制图形——默认情况下 <canvas> 元素没有边框和内容. 在画布上(Canvas ...
- HTML5特性&&canvas
1.HTML5是由W3C(万维网联盟,专注于XHTML 2.0)和WHATWG(专注于web表单和应用程序)共同合作的结果,2014年10月完成标准制定! 主要设计目的:为了在移动设备上支持多媒体. ...
随机推荐
- wareshark网络协议分析之ARP
一.ARP协议简介 简单的说ARP协议就是实现ip地址到物理地址的映射.当一台主机把以太网数据帧发送到位于同一局域网上的另一台主机时,是根据48bit的以太网地址(物理地址)来确定网络接口的. ARP ...
- 关于hadoop setCombinerClass 与 setReducerClass同时使用存在的问题。
最近在学习hadoop mapreduce编程的过程中遇到一个莫名奇妙的问题.最后通过调试时发现同时使用setCombinerClass(Reducer.class) 与 setReducerCl ...
- MyBatis之xml配置配置文件(一)(xml配置文件)
一.properties标签 <properties resource="jdbc.properties"></properties> 使用properti ...
- Intel Code Challenge Elimination Round (Div.1 + Div.2, combined) C. Destroying Array
C. Destroying Array time limit per test 1 second memory limit per test 256 megabytes input standard ...
- Python快速学习-高级特性
1.切片 取一个list或tuple的部分元素是非常常见的操作 L = ['hello','the','world','and','my','love'] 取前三个元素 L[0:3],L[:3] 取倒 ...
- php攻击漏洞总结
1.两字节编码(gbk)都存在宽字节攻击问题[character_set_client=gbk] 案例:http://www.cnblogs.com/lcamry/articles/5625276.h ...
- MySQL复制:主从和双主配置
对比Replication和Cluster 应用层中间件的负载均衡 异步的复制过程 MySQL官方使用Replication场景
- 元数据(MetaData)
元数据是用来描述数据的数据(Data that describes other data).单单这样说,不太好理解,我来举个例子. 下面是契诃夫的小说<套中人>中的一段,描写一个叫做瓦莲卡 ...
- thinkphp框架的优缺点
ThinkPHP的优缺点如下: 1.高级模型:可以轻松支持序列化字段.文本字段.只读字段.延迟写入.乐观锁.数据分表等高级特性. 2.视图模型:轻松动态地创建数据库视图,多表查询相对简单. 3.关联模 ...
- 简单实用的磁带转MP3方法图解
读完这篇文章,然后在看看文章的最后部分. [图文]磁带转Mp3教程 来源: 作者:netseeker 一.工具 1.音频线一条. 在一般的电器铺都能买到,8-15元不等,两头的接口是一样的,可以混用 ...