<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
canvas{border:0px;}
</style>
<script type="text/javascript">
function draw(){
var ctx = document.getElementById('my_canvas').getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 30);
ctx.lineTo(300, 30);
line_gra = ctx.createLinearGradient(20, 25, 20, 35);
line_gra.addColorStop(0, "#663300");
line_gra.addColorStop(0.5,"white");
line_gra.addColorStop(1, "#663300");
ctx.strokeStyle = line_gra;
ctx.lineWidth = 10;
ctx.stroke();
line_gra2 = ctx.createLinearGradient(400, 25, 400, 125);
line_gra2.addColorStop(0, "#3C0");
line_gra2.addColorStop(0.5, "white");
line_gra2.addColorStop(0.5, "#630");
line_gra2.addColorStop(1.0, "#9FF");
ctx.fillStyle = line_gra2;
ctx.fillRect(420, 25, 100, 100);
ctx.beginPath();
ctx.arc(600, 100, 70, 0, Math.PI*2, true);
line_gra3 = ctx.createLinearGradient(20, 30, 20, 170);
line_gra3.addColorStop(0, "#333");
line_gra3.addColorStop(1, "#DDD");
ctx.fillStyle = line_gra3;
ctx.fill();
ctx.beginPath();
ctx.arc(600, 100, 60, 0, Math.PI*2, true);
line_gra4 = ctx.createLinearGradient(20, 40, 20, 160);
line_gra4.addColorStop(0, "#DDD");
line_gra4.addColorStop(1, "#333");
ctx.fillStyle = line_gra4;
ctx.fill();
ctx.beginPath();
ctx.arc(50, 70, 30, 0, Math.PI*2, true);
rad_gra = ctx.createRadialGradient(40, 50, 3, 50, 70, 30);
rad_gra.addColorStop(0, "rgba(255,255,255,0.4)");
rad_gra.addColorStop(1, "#F90");
ctx.fillStyle = rad_gra;
ctx.fill();
ctx.beginPath();
ctx.arc(100, 100, 40, 0, Math.PI*2, true);
rad_gra2 = ctx.createRadialGradient(110, 110, 5, 100, 100, 40);
rad_gra2.addColorStop(0, "#9FF");
rad_gra2.addColorStop(0.95, "#33F");
rad_gra2.addColorStop(1, "rgba(51,51,255,0.2)");
ctx.fillStyle = rad_gra2;
ctx.fill();
ctx.beginPath();
ctx.arc(300,300,200,0,Math.PI,true);
ctx.lineTo(120, 300);
ctx.arc(300,300,150,Math.PI,0,false);
ctx.lineTo(475,300);
rad_gra3 = ctx.createRadialGradient(300,300,150,300,300,200);
rad_gra3.addColorStop(0,"rgba(255,0,0,0.1)");
rad_gra3.addColorStop(0.2,"rgba(255,255,0,0.7)");
rad_gra3.addColorStop(0.4,"rgba(255,0,0,0.6)");
rad_gra3.addColorStop(0.7,"rgba(51,200,255,0.6)");
rad_gra3.addColorStop(0.9,"rgba(255,218,0,0.6)");
rad_gra3.addColorStop(1,"rgba(255,218,0,0.2)");
ctx.fillStyle = rad_gra3;
ctx.fill();
}
</script>
</head>
<body>
<canvas id="my_canvas" width="700px" height="300px"></canvas>
<script>draw()</script>
</body>只能在firfox里work 在IE中一片空白。。。
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
canvas{border:0px;}
</style>
<script type="text/javascript">
function draw(){
var ctx = document.getElementById('my_canvas').getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 30);
ctx.lineTo(300, 30);
line_gra = ctx.createLinearGradient(20, 25, 20, 35);
line_gra.addColorStop(0, "#663300");
line_gra.addColorStop(0.5,"white");
line_gra.addColorStop(1, "#663300");
ctx.strokeStyle = line_gra;
ctx.lineWidth = 10;
ctx.stroke();
line_gra2 = ctx.createLinearGradient(400, 25, 400, 125);
line_gra2.addColorStop(0, "#3C0");
line_gra2.addColorStop(0.5, "white");
line_gra2.addColorStop(0.5, "#630");
line_gra2.addColorStop(1.0, "#9FF");
ctx.fillStyle = line_gra2;
ctx.fillRect(420, 25, 100, 100);
ctx.beginPath();
ctx.arc(600, 100, 70, 0, Math.PI*2, true);
line_gra3 = ctx.createLinearGradient(20, 30, 20, 170);
line_gra3.addColorStop(0, "#333");
line_gra3.addColorStop(1, "#DDD");
ctx.fillStyle = line_gra3;
ctx.fill();
ctx.beginPath();
ctx.arc(600, 100, 60, 0, Math.PI*2, true);
line_gra4 = ctx.createLinearGradient(20, 40, 20, 160);
line_gra4.addColorStop(0, "#DDD");
line_gra4.addColorStop(1, "#333");
ctx.fillStyle = line_gra4;
ctx.fill();
ctx.beginPath();
ctx.arc(50, 70, 30, 0, Math.PI*2, true);
rad_gra = ctx.createRadialGradient(40, 50, 3, 50, 70, 30);
rad_gra.addColorStop(0, "rgba(255,255,255,0.4)");
rad_gra.addColorStop(1, "#F90");
ctx.fillStyle = rad_gra;
ctx.fill();
ctx.beginPath();
ctx.arc(100, 100, 40, 0, Math.PI*2, true);
rad_gra2 = ctx.createRadialGradient(110, 110, 5, 100, 100, 40);
rad_gra2.addColorStop(0, "#9FF");
rad_gra2.addColorStop(0.95, "#33F");
rad_gra2.addColorStop(1, "rgba(51,51,255,0.2)");
ctx.fillStyle = rad_gra2;
ctx.fill();
ctx.beginPath();
ctx.arc(300,300,200,0,Math.PI,true);
ctx.lineTo(120, 300);
ctx.arc(300,300,150,Math.PI,0,false);
ctx.lineTo(475,300);
rad_gra3 = ctx.createRadialGradient(300,300,150,300,300,200);
rad_gra3.addColorStop(0,"rgba(255,0,0,0.1)");
rad_gra3.addColorStop(0.2,"rgba(255,255,0,0.7)");
rad_gra3.addColorStop(0.4,"rgba(255,0,0,0.6)");
rad_gra3.addColorStop(0.7,"rgba(51,200,255,0.6)");
rad_gra3.addColorStop(0.9,"rgba(255,218,0,0.6)");
rad_gra3.addColorStop(1,"rgba(255,218,0,0.2)");
ctx.fillStyle = rad_gra3;
ctx.fill();
}
</script>
</head>
<body>
<canvas id="my_canvas" width="700px" height="300px"></canvas>
<script>draw()</script>
</body>只能在firfox里work 在IE中一片空白。。。
</html>
分享到：
发表评论
-
HTML <object> 标签
2010-03-04 22:31 831定义和用法 定义一个嵌入的对象。请使用此元素向您的 XHTML ... -
js代码：字符动画
2010-03-04 22:30 822<!DOCTYPE html PUBLIC " ... -
js代码：浏览器状态栏飞入文字
2010-03-04 22:29 1212<!DOCTYPE html PUBLIC " ... -
CSS+DIV实现的页面优化代码
2010-03-04 22:28 621<!DOCTYPE html PUBLIC " ... -
IE捉迷藏问题及解决方案
2010-03-04 22:28 983<!DOCTYPE html PUBLIC " ... -
js代码：飘落的雪花
2010-03-04 22:27 821<!DOCTYPE html PUBLIC " ... -
正则表达式菜鸟入门
2010-03-04 22:25 675常用的正则表达式主 ... -
jquery学习资料
2010-03-04 22:23 790今天开始看看jquery类库 这是我接触的第三个类库 之前有e ... -
jquery菜鸟入门
2010-03-04 22:23 775转自：http://hi.baidu.com/%B7%C9%D ... -
设置flash透明使div层能显示在其之上
2010-03-04 22:21 962给flash加上这句代码<param name=&quo ... -
Ajax原理步骤
2010-03-04 22:21 1062核心：XMLHttpRequest对象 属性 ... -
ruby打包成gem
2010-03-04 22:20 1297gem 打包： gem build xxx.rb gem 安装 ... -
prototype Ajax.Updater
2010-03-04 22:19 726var url = "/edit/find_topi ... -
ruby日期指令
2010-03-04 22:17 977%A 周日期全称 Saturday %a 周日期缩写 %B ...
相关推荐
本文将深入探讨如何在编程环境中实现渐变图形的绘制，主要关注以下几个关键知识点： 1. **颜色渐变类型**： - **线性渐变（Linear Gradient）**：颜色沿着直线方向平滑过渡，可以指定起点和终点，以及中间的颜色...
2. **图形库和框架**: 在实际开发中，开发者常使用图形库或框架来简化图形代码的编写，例如D3.js用于数据可视化，Three.js用于3D图形，或者ECharts、Chart.js等用于创建图表。这些库提供了丰富的功能，如动画效果、...
### 有意思的Js可拖动的渐变色角度选择器 #### 概述 本文将详细介绍一个有趣的JavaScript项目——“可拖动的渐变色角度选择器”。该项目通过使用HTML、CSS 和 JavaScript 实现了一个交互式的渐变色角度选择器。...
例如，在`12.globalAlpha.html`文件中，我们可以看到如何设置`globalAlpha`的示例代码，通过调整这个属性，可以控制图形的可见度，创造出半透明或者逐渐消失的效果。 ```javascript context.globalAlpha = 0.5; // ...
矢量图形操作源代码是计算机图形学领域的一个重要主题，主要涉及如何使用编程语言来创建、编辑和处理矢量图像。矢量图形与位图图形不同，它基于数学公式和几何形状，使得图像在放大时不会失真，适用于标志、图标、...
这个"Js实现图片渐变效果.rar"压缩包可能包含一个或多个代码示例，帮助初学者理解如何通过JavaScript来操作图像像素，实现颜色渐变。 首先，我们需要了解JavaScript中的Canvas API。Canvas是HTML5引入的一个重要...
p5.js 是一个基于 JavaScript 的开源库，它使得在网页上创建交互式图形、动画以及音频变得更加简单。这个库的灵感来源于 Processing，但针对现代 Web 开发进行了优化，支持最新的 HTML5 和 WebGL 技术。在“p5.js的...
然后，你可以创建一个新的画布，并在上面绘制图形： ```javascript var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var krap = new Krap(context); // 创建一个圆形 ...
本文将深入探讨如何使用CSS3来实现图形的颜色渐变，并结合JavaScript、jQuery以及HTML5来构建出丰富的网页特效。 首先，我们要了解CSS3中的两种渐变类型：线性渐变（linear-gradient）和径向渐变（radial-gradient...
通过JavaScript的API，我们可以控制每一像素的颜色和位置，从而创建各种复杂的图形和动画。在本案例中，"时钟"的实现需要用到以下核心知识点： 1. **HTML5 Canvas API**：首先，我们需要在HTML文档中创建一个`...
在文章中，渐变色带的代码实现可能涉及到CSS（层叠样式表）或者图形库，如JavaScript的Canvas API。以下是一些关于创建渐变色带的知识点： 1. **CSS渐变**： - **线性渐变（Linear Gradient）**：使用`linear-...
JS 3D渐变柱状图表特效正是结合了这两个方面，通过echarts.js库实现了动态、美观的数据展示方式。echarts.js是由百度开发的一个强大的、开源的可视化库，支持多种图表类型，包括柱状图、折线图、饼图等，且具有高度...
Python的tkinter库也可以通过结合JavaScript的Canvas渐变实现颜色渐变，通常通过在Tkinter的Canvas对象上嵌入HTML5 Canvas并利用JavaScript代码来完成。 总结来说，HTML5 Canvas通过提供创建和应用渐变的功能，为...
本压缩包文件“程序渐变背景.rar”可能包含了一些用于创建动态或静态渐变背景的代码示例、资源文件或工具，其名称直接反映了主题内容。下面我们将深入探讨与程序渐变背景相关的知识点。 1. **色彩理论**：渐变背景...
- **js**：包含JavaScript代码，实现插件的功能逻辑。 - **src**：源代码目录，可能包含了插件的未编译或原始代码。 这款插件依赖于jQuery库，这从`jQuery之家.url`的命名可以推测。jQuery是一个广泛使用的...
7. **颜色和样式**：图形的颜色填充、描边样式、渐变效果等都是通过代码来控制的。源码可能涵盖如何设置和应用这些样式，以及如何实现透明度和混合模式。 8. **图形库和框架**：开发者可能会使用现有的图形库，如...
最后，"js"目录则包含了实现这个特效的核心JavaScript代码文件。 总的来说，"171图形渐变相册导航特效"是一个利用JavaScript技术实现的创新网页交互设计，通过图形的渐变效果增强了相册导航的用户体验。开发者通过...
在提供的文件中，`index.html`是主页面，包含了HTML结构和可能的JavaScript代码；`readme.html`可能包含关于这个特效的说明或指南；`jQuery之家.url`可能是一个链接，指向关于jQuery的资源，虽然这个特效未明确提到...
然后，编写JavaScript代码来控制渐变效果。这可能涉及到定时器（如`setInterval`或`requestAnimationFrame`）来逐步更新图片的样式。同时，确保兼容不同浏览器，可能需要使用`window.onload`或`document....
9. **编程接口（API）设计**：矢量图形系统通常提供编程接口供开发者使用，例如JavaScript的SVG API或Adobe Illustrator的插件接口。这部分可能讲解如何设计和实现高效、易用的API。 10. **性能优化**：由于矢量...