<script type="text/javascript">
function canvasOperator() {
var myCanvas = document.getElementById('myCanvas');
var context = myCanvas.getContext('2d');
//line gradients
var lineGradients = context.createLinearGradient(0, 0, 500, 0);
lineGradients.addColorStop(0, 'black');
lineGradients.addColorStop(1, 'white');
context.fillStyle = lineGradients;//give gradient object to context.fillStyle
context.fillRect(0, 0, 500, 200);
var myCanvas1 = document.getElementById('myCanvas1');
var context1 = myCanvas1.getContext('2d');
//line gradients
var lineGradients1 = context1.createLinearGradient(0, 0, 0, 200);
//渐变位置可以在0和1之间任意位置取值
lineGradients1.addColorStop(0, 'black');
lineGradients1.addColorStop(1, 'white');
lineGradients1.addColorStop(0.7, 'blue');
lineGradients1.addColorStop(0.5, 'red');
//fillStyle:可以设置为css颜色,一个图案或一种颜色渐变
context1.fillStyle = lineGradients1;//give gradient object to context1.fillStyle
context1.fillRect(0, 0, 200, 500);
var myCanvas2 = document.getElementById('myCanvas2');
var context2 = myCanvas2.getContext('2d');
//沿着两个圆之间的锥面,绘制渐变。前三个参数代表开始的圆,圆心为(x0,y0),半径为r0.最后三个参数代表结束的圆,圆心为
//(x1,y1),半径为r1
var radialGradient = context2.createRadialGradient(100,100,50,400,400,50);
context2.fillStyle=radialGradient;
radialGradient.addColorStop(0, 'black');
radialGradient.addColorStop(1, 'white');
context2.fillRect(0, 0, 500, 500);
}
</script>
- 大小: 20.4 KB
分享到:
相关推荐
js+HTML5实现canvas多种颜色渐变效果的方法.docx
这是一款基于canvas的背景颜色渐变动画插件。该插件通过配置几组不同的颜色方案,使指定元素在这些颜色中执行平滑的渐变色过渡效果。
主要介绍了JavaScript+html5 canvas绘制渐变区域的方法,结合完整实例形式分析了canvas颜色调用与图形绘制的相关技巧,需要的朋友可以参考下
主要介绍了js+HTML5实现canvas多种颜色渐变效果的方法,涉及html5属性的相关技巧,需要的朋友可以参考下
HTML5 Canvas星空背景特效是一款通过配置参数进行灵活的配置,可用鼠标进行互动。
3.2.1 绘制颜色渐变效果的图形 / 65 3.2.2 颜色合成之globalcompositeoperation属性 / 67 3.2.3 颜色反转 / 69 3.2.4 灰度控制 / 70 3.2.5 阴影效果 / 71 3.3 自定义画板 / 72 3.3.1 画板的建立 / 72 3.3.2 ...
脚本简介HTML5交互式渐变背景动画特效是一款基于HTML5 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 ...
一款酷炫的HTML5 Canvas菱角多边形背景动画特效代码,图形从颜色渐变到多边形。
基于canvas的jquery背景颜色渐变动画插件granim.js.zip
本文实例为大家分享了canvas绘制渐变颜色的矩形的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>...
HTML5 Canvas气泡背景特效是一款带渐变效果的气泡动画背景效果,并且背景颜色能在4种颜色间平滑过渡转换。、
填充颜色 艺术离不开色彩,今天咱们来介绍一下填充颜色,体会一下色彩的魅力。填充颜色主要分为两种: ...由于 HTML5 没有修改专属的颜色,HTML4 的颜色都可以在 HTML5 中正确显示。 所有这些颜色值
像素渐变背景Canvas动画是一款基于HTML5 Canvas绘制的全屏渐变颜色背景,自动像素渐变背景颜色切换动画特效。
主要介绍了HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例,充分利用到了坐标的操作,说明都写在代码注释里了很简明,需要的朋友可以参考下
HTML5环境下Canvas入门, 在Chrome或FF环境下可以预览, 些例说明了Canvas下可以随意的进行画图, 我的例子主要以带圆角的矩形及渐变颜色为例子