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图形、动画、游戏开发从入门到精通全系列课程
学习HTML5 Canvas还需要理解SVG(Scalable Vector Graphics)与Canvas的区别和互用性。SVG适合静态矢量图形,而Canvas更适合动态内容和复杂动画。在某些情况下,结合两者可以创建更丰富的Web体验。 最后,本书可能...
HTML5 Canvas是Web开发中的一个关键技术,它提供了一个在网页上绘制图形的API,使得开发者可以直接在浏览器中创建丰富的交互式2D图形、动画以及...这些代码覆盖了上述所有知识点,是学习和探索Canvas技术的理想资源。
在网页开发中,Canvas是一个...总的来说,学习并掌握Canvas的渐变线条绘制,不仅可以提升网页的视觉表现,也是提升开发者在前端领域技能的重要一步。通过不断实践和探索,我们可以创造出更多富有创意和美感的网页元素。
这篇博客"canvas画矩形(包括渐变)"探讨了如何使用Canvas API来绘制矩形,并且介绍了如何创建和应用线性渐变效果。在本文中,我们将深入探讨这些概念,以帮助你更好地理解和运用它们。 首先,Canvas API提供了两个...
2.17_canvas中的径向渐变|canvas填充样式(渐变色与纹理)|Canvas图形、动画、游戏开发从入门到精通全系列课程
### HTML5 Canvas核心技术:图形、动画与游戏开发 #### 第1章 基础知识 - **1.1 canvas元素** - **1.1.1 canvas元素...以上章节涵盖了从`canvas`的基础概念到高级绘图技巧的全面内容,适合初学者和进阶学习者阅读。
在canvas学习中,图形透明及交叠效果是两个重要的概念,它们可以让我们创建出丰富的视觉效果和动态交互。本文将详细解析这两个知识点,并通过提供的标签和文件名来具体阐述。 首先,我们来看“图形透明”这个概念。...
2.18_canvas中使用图片、画布或者video|canvas填充样式(渐变色与纹理)|Canvas图形、动画、游戏开发从入
标题中的"canvas::framed_picture_selector:渐变模糊墙纸生成器和设置器"是一个项目的名字,它是一个用于创建和设置渐变模糊墙纸的工具。这个工具可能结合了多个技术,包括图像处理和自动化脚本,尤其适用于Linux...
在本篇博客“canvas学习(三):炫丽的电子时钟”中,作者通过HTML5的canvas元素展示了如何创建一个动态且具有视觉吸引力的电子时钟。canvas是HTML5中用于绘制图形的一个重要组成部分,它允许开发者用JavaScript来...
在本项目"canvas_demo:canvas自我学习"中,主要探讨的是HTML5的Canvas元素及其在创建炫彩小球运动效果中的应用。Canvas是HTML5的一个重要特性,它为Web开发者提供了一个可以在网页上绘制2D图形的接口。下面将详细...
2.19_渐变色和纹理小结|canvas填充样式(渐变色与纹理)|Canvas图形、动画、游戏开发从入门到精通全系列课程
【HTML Canvas 学习与应用】 HTML5 的 Canvas 是一种基于矢量图形的...通过深入学习和实践这个Demo,开发者可以进一步掌握Canvas的高级特性,如渐变、阴影、路径绘制等,从而开发出更复杂、更富有互动性的网页应用。
3. 渐变和阴影:Canvas支持线性渐变、径向渐变以及阴影效果,通过`createLinearGradient()`和`createRadialGradient()`创建渐变对象,`shadowBlur`、`shadowOffsetX`和`shadowOffsetY`设置阴影效果。 4. 图像处理:...
Labud帆布可能是一个用于学习、实验或者开发基于Canvas的图形应用的工具或框架。 HTML5 Canvas的核心是通过JavaScript来控制图形的绘制。它提供了丰富的API,如`fillRect()`用于填充矩形,`beginPath()`和`stroke()...
由于标题为"canvas学习.zip",并且描述提到了"canvas的官网小例子",我们可以从中了解到这个压缩包可能包含了一些用于学习`canvas`的实例代码。 `canvas`标签是一个内联元素,通过JavaScript API与之交互。在HTML中...
《Canvas开发笔记》是一部关于HTML5 Canvas的详细学习资料,主要涵盖了从基本的二维场景绘制到复杂的图像处理和动画制作等内容。以下是对这些知识点的详细解释: 1. **Canvas基本概念**:HTML5 Canvas是一个基于...
这篇“HTML5 Canvas学习笔记(5)游戏得分动画”着重讲解了如何利用Canvas技术来实现游戏中的得分动画效果。通过学习这篇笔记,我们可以深入了解Canvas的基本用法以及如何将它应用于游戏开发。 首先,Canvas是HTML5的...
- **绘图API**:canvas提供了丰富的绘图方法,如`fillRect()`(填充矩形)、`strokeRect()`(描边矩形)、`arc()`(绘制圆弧)等,以及路径操作、颜色管理、渐变和阴影等特性。 2. **jQuery库** - **jQuery简介**...