HTML5逐步实现
2024-09-15 00:52:51
渐变
Context对象能够通过createLinearGradient()和createRadialGradient()两个方法创建渐变对象。这两个方法的原型例如以下:
Object createLinearGradient(x1, y1, x2, y2);
创建一个从(x1, y1)点到(x2, y2)点的线性渐变对象。
Object createRadialGradient(x1, y1, r1, x2, y2, r2);
创建一个从以(x1, y1)点为圆心、r1为半径的圆到以(x2, y2)点为圆心、r2为半径的圆的径向渐变对象。
渐变对象创建完毕之后必须使用它的addColorStop()方法来加入颜色,该方法的原型例如以下:
void addColorStop(position, color);
当中position表示加入颜色的位置。取值范围为[0, 1],0表示起点,1表示终点;color表示加入的颜色,取值能够是不论什么CSS颜色值。
渐变对象创建并配置完毕之后就能够将其赋予Context对象的strokeStyle属性或者fillStyle属性,然后绘制的图形就具有了所需的渐变效果。
那咱们一起看一下以下这个样例:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">canvas{left: 50%; position:relative; margin-left: -200px; top;}</style></head><body><canvas id="drawDiagonal" width="400" height="500" style="border: 1px solid #008B8B;"></canvas></body><script type="text/javascript">var canvas=document.getElementById('drawDiagonal');var cd=canvas.getContext('2d');cd.save();cd.translate(-10,350);cd.beginPath();cd.moveTo(0,0);cd.quadraticCurveTo(170,-80,260,-190);cd.quadraticCurveTo(310,-250,410,-250);cd.strokeStyle='#663300';cd.lineWidth=50;cd.stroke();cd.restore();var lg = cd.createLinearGradient(80,220,240, 200); //能够尝试改变这里的參数。改变不同的效果。lg.addColorStop(0, 'yellow');lg.addColorStop(0.9, '#3CB371');lg.addColorStop(1,'#2E8B57');cd.fillStyle=lg;//把设置好的颜色值附给cdcd.strokeStyle ='yellowgreen';cd.lineWidth=4;cd.lineJoin='round'cd.beginPath();cd.moveTo(200,40);cd.lineTo(160,100);cd.lineTo(185,100);cd.lineTo(145,160);cd.lineTo(170,160);cd.lineTo(135,220);cd.lineTo(180,220);cd.lineTo(170,320);cd.lineTo(235,320);cd.lineTo(220,220)cd.lineTo(260,220);cd.lineTo(225,160);cd.lineTo(250,160);cd.lineTo(210,100);cd.lineTo(235,100);cd.closePath();cd.fill();cd.stroke();</script></html>
其效果例如以下图所看到的:
大家试图去尝试一点点!
在没有明确的地方是能够相互沟通.
版权声明:本文博客原创文章,博客,未经同意,不得转载。
最新文章
- Uncaught RangeError: Maximum call stack size exceeded 超出最大调用值(个人解释)
- 原生JS实战:写了个斗牛游戏,分享给大家一起玩!
- phpcms手机门户相关
- BizTalk开发系列(三十)单向端口实现请求-响应
- create thread的时候发生core dump
- PHP-----二维数组和二分查找
- Codeforces Round# 305 (Div 1)
- 一个前端html模板处理引擎(javascript) - pure
- C# 字典 Dictionary<;Tkey,Tvalue>;
- nyist 597 完数?
- Creating Object Library OLB in Oracle D2k Form
- [备忘]Visio中连接线交叉时跨线小弯的去掉方法
- 分享 Java微信开发SDK
- 关于增强for循环
- Java中线程池的学习
- 自制ichartjs饼图
- 什么是WEBserver? 经常使用的WEBserver有哪些?
- 基于 websocket 实现的 im 实时通讯案例
- Android多Module下的Application引用方式
- Unity-NGUI UILabel换行
热门文章
- AE开发概念辨析
- 每天一个JavaScript实例-操作元素定位元素
- Fragment的基本应用
- VCS编译仿真警告Warning
- SetProcessWorkingSetSize() 方法使内存降低了很多(把内存放到交换区,其实会降低性能)——打开后长时间不使用软件,会有很长时间的加载过程,原来是这个!
- 基于 Android NDK 的学习之旅----- Java 方法映射到C中的签名
- [NPM] Add comments to your npm scripts
- php如何实现万年历的开发(每日一课真是非常有效率)
- 基于GTID多源复制扩展
- 《Erlang程序设计》学习笔记-第2章 并发编程