canvas中的渐变分两种:线性渐变和径向渐变,线性渐变又分为倾斜渐变、水平渐变和垂直渐变,径向渐变又称为放射状/环形的渐变。
线性渐变效果图:
径向渐变效果图:
代码如下:
var window_width = document.documentElement.clientWidth-20; var window_height = document.documentElement.clientHeight-20; window.onload=function(){ var myCanvas = document.getElementById("myCanvas"); if(myCanvas.getContext("2d")){ myCanvas.width = window_width; myCanvas.height = window_height; var context =myCanvas.getContext("2d"); //绘制线性渐变 drawLinearGradient(context,1); //绘制径向渐变 //drawRadialGradient(context); }else{ return false; } } /** *该方法用来绘制线性渐变图形 *@param cxt:canvas的上下文环境 *@param flag2:1-倾斜渐变 2-水平渐变 3-垂直渐变 */ function drawLinearGradient(cxt,flag2){ //1、创建一个线性渐变,范围从0、0到画布的宽和高,也就是整个画布都渐变 //createLinearGradient(param1,param2,param3,param4):param1:渐变开始点的 x 坐标,param2:渐变开始点的 y 坐标,param3:渐变结束点的 x 坐标,param4::渐变结束点的 y 坐标 var linearGrad = null; switch(flag2){ case 1:linearGrad = cxt.createLinearGradient(0,0,window_width,window_height);break;//倾斜 case 2:linearGrad = cxt.createLinearGradient(0,0,0,window_height);break;//水平 case 3:linearGrad = cxt.createLinearGradient(0,0,window_width,0);break;//垂直 } //2、规定渐变对象中的颜色和停止位置 //addColorStop(stop,color):stop:介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置;color:在结束位置显示的 CSS 颜色值 linearGrad.addColorStop(0,"white"); linearGrad.addColorStop("0.25","yellow"); linearGrad.addColorStop("0.5","green"); linearGrad.addColorStop("0.75","blue"); linearGrad.addColorStop(1,"black");//若渐变范围没有铺满整个画布,那么没有铺满的颜色用最后这个颜色填充 //3、填充画布 cxt.fillStyle=linearGrad; //4、绘制图形 cxt.fillRect(0,0,window_width,window_height); } /** *该方法用来绘制径向渐变图形 *@param cxt:canvas的上下文环境 */ function drawRadialGradient(cxt){ //1、创建一个径向渐变,即放射状/环形的渐变, //createRadialGradient(param1,param2,param3,param4,param5,param6):param1:渐变的开始圆的 x 坐标,param2:渐变的开始圆的 y 坐标,param3:开始圆的半径,param4:渐变的结束圆的 x 坐标,param5:渐变的结束圆的 y 坐标,param6:结束圆的半径 var R1 = window_width>window_height?window_height/2:window_width/2; var R2 = R1/4; var radialGrad = cxt.createRadialGradient(window_width/2,window_height/2,R2,window_width/2,window_height/2,R1); //2、规定渐变对象中的颜色和停止位置 //addColorStop(stop,color):stop:介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置;color:在结束位置显示的 CSS 颜色值 radialGrad.addColorStop(0,"white"); radialGrad.addColorStop("0.25","yellow"); radialGrad.addColorStop("0.5","green"); radialGrad.addColorStop("0.75","blue"); radialGrad.addColorStop(1,"black");//若渐变范围没有铺满整个画布,那么没有铺满的颜色用最后这个颜色填充 //3、填充画布 cxt.fillStyle=radialGrad; //4、绘制图形 cxt.fillRect(0,0,window_width,window_height); }
相关推荐
2.16_canvas中的线性渐变|canvas填充样式(渐变色与纹理)|Canvas图形、动画、游戏开发从入门到精通全系列课程
2.17_canvas中的径向渐变|canvas填充样式(渐变色与纹理)|Canvas图形、动画、游戏开发从入门到精通全系列课程
2.18_canvas中使用图片、画布或者video|canvas填充样式(渐变色与纹理)|Canvas图形、动画、游戏开发从入
2.19_渐变色和纹理小结|canvas填充样式(渐变色与纹理)|Canvas图形、动画、游戏开发从入门到精通全系列课程
44 第2章 绘制 45 2.1 坐标系统 46 2.2 canvas的绘制模型 47 2.3 矩形的绘制 48 2.4 颜色与透明度 50 2 .5 渐变色与图案 52 2.5.1 渐变色 52 2.5.2 图案 54 2.6 阴影 57 2.7 路径、描边与填充 60 2.7.1 ...
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解 大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家带来帮助,愿意一起...
粒子运动是通过三次贝塞尔曲线控制,且有渐变的透明度和大小变化 适用人群: 前端开发者、网页设计师、编程爱好者、动画设计师 使用场景及目标: 学习场景: 作为一个学习示例,前端开发者可以通过该代码了解如何在 ...
这段代码详细注释,适合前端开发初学者及爱好者学习,涵盖了Canvas基本绘图、动画循环、以及利用JavaScript实现心跳般缩放与颜色渐变的技巧,让您的网页充满爱的气息。不论是情人节表白网页制作,还是增加网页互动性...
Canvas – 路径新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。 在Canvas上画线,我们将使用以下两种方法: moveTo...
CSS样式设计,其中有动画特效、渐变、图形图像、2D/3D转换特效、自适应网页设计等;JS包含核心语法、面向对象编程、复杂的项目案例、HTTP网络协议、AJAX前后端异步交互等;新型前端开发大部分回归原始开发,核心编程...
很详尽的html5学习demo,包括 、图像处理、canvas变换、旋转、翻转、平移、像素处理、渐变、html5的鼠标事件等,对于研究html5的功能有极大帮助
CanvasDemo 使用Canvas进行布局。 DockPanelDemo 使用DockPanel进行布局。 GridDemo 使用Grid进行布局。 InkCanvasDemo 使用InkCanvas的示例。 SimpleDiagDox 简单对话框示例程序。 ...
2.2.10 渐变 37 2.2.11 背景图 39 2.2.12 缩放canvas对象 41 2.2.13 Canvas变换 42 2.2.14 Canvas文本 43 2.2.15 应用阴影 45 2.2.16 像素数据 46 2.2.17 Canvas的安全机制 48 2.3 使用HTML5 Canvas创建应用 48 2.4 ...
《深入HTML5编程(第 2版)》面向有一定经验的Web应用开发人员,对HTML5及未来Web应用技术发展有浓厚兴趣的读者也可以学习参考。 第1章 HTML5概述 1 1.1 HTML5发展史 1 1.2 关于2022年的那个神话 2 1.3 谁在开发...
2.2.10 渐变 37 2.2.11 背景图 39 2.2.12 缩放canvas对象 41 2.2.13 canvas变换 42 2.2.14 canvas文本 43 2.2.15 应用阴影 45 2.2.16 像素数据 46 2.2.17 canvas的安全机制 48 2.3 使用html5 canvas创建应用...
2.2.10 渐变 37 2.2.11 背景图 39 2.2.12 缩放canvas对象 41 2.2.13 Canvas变换 42 2.2.14 Canvas文本 43 2.2.15 应用阴影 45 2.2.16 像素数据 46 2.2.17 Canvas的安全机制 48 2.3 使用HTML5 Canvas创建应用 48 2.4 ...
2.2.10 渐变 37 2.2.11 背景图 39 2.2.12 缩放canvas对象 41 2.2.13 Canvas变换 42 2.2.14 Canvas文本 43 2.2.15 应用阴影 45 2.2.16 像素数据 46 2.2.17 Canvas的安全机制 48 2.3 使用HTML5 Canvas创建应用 48 2.4 ...
2.2.10 渐变 37 2.2.11 背景图 39 2.2.12 缩放canvas对象 41 2.2.13 Canvas变换 42 2.2.14 Canvas文本 43 2.2.15 应用阴影 45 2.2.16 像素数据 46 2.2.17 Canvas的安全机制 48 2.3 使用HTML5 Canvas创建应用 48 2.4 ...
2.2.10 渐变 37 2.2.11 背景图 39 2.2.12 缩放canvas对象 41 2.2.13 Canvas变换 42 2.2.14 Canvas文本 43 2.2.15 应用阴影 45 2.2.16 像素数据 46 2.2.17 Canvas的安全机制 48 2.3 使用HTML5 Canvas创建应用...