下载文档原格式
JavaScript图形实例：蝴蝶结图案1．长短瓣相间的蝴蝶结设定曲线的坐标方程为：b=r*(1+cos(n*θ)/4)*(1+sin(2*n*θ));x1=b*cos(θ);x2=b*cos(θ+π/8);y1=b*Math.sin(θ);y2=b*Math.sin(θ+π/8); （0≤θ≤2π，2≤n≤5）在0~2π区间中从θ=0开始，每隔π/360按曲线方程求得两个点的坐标值(x1,y1)和(x2,y2)，并将求得的两点连成一条线段，这样，可以得到一个长短瓣相间的蝴蝶结图案。
编写如下的HTML代码。
<!DOCTYPE html><head><title>长短瓣相间的蝴蝶结</title><script type="text/javascript">function draw(id){var canvas=document.getElementById(id);if (canvas==null)return false;var context=canvas.getContext('2d');context.fillStyle="#EEEEFF";context.fillRect(0,0,400,300);context.strokeStyle="red";context.lineWidth=1;context.beginPath();var n=3;for (theta=0;theta<=2*Math.PI;theta+=Math.PI/360){e=60*(1+Math.cos(n*theta)/4);f=e*(1+Math.sin(2*n*theta));x1=200+f*Math.cos(theta);x2=200+f*Math.cos(theta+Math.PI/8);y1=150-f*Math.sin(theta);y2=150-f*Math.sin(theta+Math.PI/8);context.moveTo(x1,y1);context.lineTo(x2,y2);}context.closePath();context.stroke();}</script></head><body onload="draw('myCanvas');"><canvas id="myCanvas" width="400" height="300"></canvas></body></html>将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML 代码的html文件，可以看到在浏览器窗口中绘制出的长短各三瓣相间的蝴蝶结图案，如图1所示。
JavaScript图形实例：太极图在Canvas API中，上下文CanvasRenderingContext2D对象提供了一个绘制圆与圆弧的方法，其基本格式为：void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);其中，参数x和y是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），anticlockwise表示作图时应该逆时针画（true）还是顺时针画（false）。
1．太极图通过绘制4个半圆弧和两个小圆的方式可以绘制一个太极图。
编写HTML文件的内容如下。
<!DOCTYPE html><head><title>太极图</title><script type="text/javascript">function draw(id){var canvas=document.getElementById(id);if (canvas==null)return false;var context=canvas.getContext('2d');context.fillStyle="#EEEEFF";context.fillRect(0,0,400,400);context.strokeStyle ='black';context.lineWidth = 2;context.beginPath();context.arc(200,200,150,Math.PI/2,3*Math.PI/2,false);context.arc(200,125,75,3*Math.PI/2,Math.PI/2,false);context.arc(200,275,75,3*Math.PI/2,Math.PI/2,true);context.fillStyle='black';context.fill();context.arc(200,200,150,Math.PI/2,3*Math.PI/2,true);context.stroke();context.beginPath();context.arc(200,275,150*0.15,0,2*Math.PI,false);context.fill();context.beginPath();context.arc(200,125,150*0.15,0,2*Math.PI,false);context.fillStyle ='#EEEEFF';context.fill();}</script></head><body onload="draw('myCanvas');"><canvas id="myCanvas" width="400" height="400" style="border:3px double #996633;"> </canvas></body></html>在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出如图1所示的太极图。
花程式举例及其含义花程式，源自日语中的「花樣」と「程式」两个词，意为「花样程式」。
在编程领域中，花程式是指以创意和美学为目标，设计出富有艺术感和独特性的计算机程序。
这些程序通常会展示出令人惊叹的视觉效果、声音效果或交互式体验，以打破传统编程的束缚，让人们能够欣赏到编程艺术的魅力。
花程式的举例非常丰富多样，下面将介绍几个常见的花程式，并解释它们所蕴含的含义。
1. 异象之境：这是一个基于计算机图形学的花程式示例，旨在通过视觉效果营造出一个充满幻想和神秘感的虚拟世界。
通过使用复杂的图形算法、颜色渐变和动态效果，异象之境能够给人一种置身于梦境中的感觉，让人们沉浸在艺术的魔力之中。
这个示例的含义在于展示计算机程序的无限创造力和艺术表现力。
2. 音乐之舞：这是一个结合了音频和视觉效果的花程式示例，旨在将音乐与图形结合，创造出一个充满活力和动感的视听体验。
通过分析音频的节奏和音调，程序能够实时生成出与音乐相配合的视觉效果，让人们能够通过听觉和视觉的双重感官享受到艺术的魅力。
这个示例的含义在于展示编程能够与其他艺术形式结合，创造出全新的艺术体验。
3. 交互式绘画：这是一个基于用户输入的花程式示例，旨在通过与用户的互动，创造出独特的绘画效果。
用户可以通过鼠标或触摸屏进行绘画，程序会根据用户的输入实时生成出相应的视觉效果，让人们能够在编程的世界中尽情发挥创造力和想象力。
这个示例的含义在于展示编程能够成为一种创造性的工具，让人们能够通过互动与计算机程序进行艺术创作。
4. 艺术品生成：这是一个利用机器学习和生成对抗网络的花程式示例，旨在通过训练模型生成出独特的艺术品。
程序会通过学习大量的艺术作品，然后生成出与之类似的艺术品，展示出计算机程序的创造性和艺术表现力。
这个示例的含义在于展示计算机程序可以成为一位艺术家的助手，帮助人们创造出独特的艺术作品。
花程式的含义在于探索计算机程序的艺术性和创造力。
通过花程式，人们能够欣赏到编程的美学和创新，感受到计算机程序所带来的独特体验。
如何使用JavaScript实现Canvas绘图和动画使用JavaScript来实现Canvas绘图和动画是一种常见的技术，它可以实现各种各样的图形效果和动态交互，非常适合用于创建各种类型的网页动画和游戏。
在本文中，我将详细介绍如何使用JavaScript来绘制图形、实现动画以及一些常用的绘图和动画效果。
一、构建Canvas元素为了开始绘制和动画，我们首先需要在HTML文档中创建一个Canvas元素。
Canvas是HTML5中新增的元素，它提供了一个绘制2D 图形的区域，我们可以通过JavaScript来操纵它。
在HTML文档的body标签中添加以下代码：```<canvas id="myCanvas" width="500" height="300"></canvas> ```上面的代码创建了一个id为myCanvas的Canvas元素，宽度为500像素，高度为300像素。
二、获取Canvas上下文要绘制图形或进行动画，我们需要获取Canvas的上下文对象。
在JavaScript中，我们可以使用`getContext()`方法来获取上下文对象。
在JavaScript中，使用以下代码获取Canvas上下文对象：```const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');```上面的代码通过`getElementById`方法获取了id为myCanvas的Canvas元素，然后通过`getContext`方法获取了2D上下文对象ctx。
三、绘制基本图形下面介绍如何使用JavaScript在Canvas上绘制一些基本图形，例如矩形、圆形和直线。
Canvas提供了一系列的API可以用于绘制图形。
七个基于JavaScript实现的情⼈节表⽩特效⽬录七⼣情⼈节送花动画告⽩特效玫瑰花盛开动画告⽩特效3d旋转相册点击爱⼼散开动画告⽩特效雷电打出告⽩⽂字特效粒⼦组合告⽩⽂字特效⼩熊拉⼿CSS3情⼈节动画表⽩特效七⼣情⼈节送花动画告⽩特效效果展⽰代码展⽰:<div id='content'><ul class='content-wrap'><!-- 第⼀副画⾯ --><li><!-- 背景图 --><div class="a_background"><div class="a_background_top"></div><div class="a_background_middle"></div><div class="a_background_botton"></div></div><!-- 云 --><div class="cloudArea"><div class="cloud cloud1"></div><div class="cloud cloud2"></div></div><!-- 太阳 --><div id="sun"></div></li><!-- 第⼆副画⾯ --><li><!-- 背景图 --><div class="b_background"></div><div class="b_background_preload"></div><!-- 商店 --><div class="shop"><div class="door"><div class="door-left"></div><div class="door-right"></div></div><!-- 灯 --><div class="lamp"></div></div><!-- 鸟 --><div class="bird"></div></li><!-- 第三副画⾯ --><li><!-- 背景图 --><div class="c_background"><div class="c_background_top"></div><div class="c_background_middle"></div><div class="c_background_botton"></div></div><!-- ⼩⼥孩 --><div class="girl"></div><div class="bridge-bottom"><div class="water"><div id="water1" class="water_1"></div><div id="water2" class="water_2"></div><div id="water3" class="water_3"></div><div id="water4" class="water_4"></div></div></div><!-- 星星 --><ul class="stars"><li class="stars1"></li><li class="stars2"></li><li class="stars3"></li><li class="stars4"></li><li class="stars5"></li><li class="stars6"></li></ul><div class="logo">祝天下有情⼈终成眷属</div></li></ul><!-- 雪花 --><div id="snowflake"></div><!-- ⼩男孩 --><div id="boy" class="charector"></div></div>玫瑰花盛开动画告⽩特效效果展⽰:<radialGradient id="gradient-0" gradientUnits="userSpaceOnUse" cx="-107.308" cy="104.329" r="59.181" gradientTransform="matrix(0.261752, 0.411262, -0.686293, 0.596934, 160.094667, 49.38985)"> <stop offset="0" style="stop-color: rgb(255, 0, 0);"/><stop offset="1" style="stop-color: rgb(141, 41, 41);"/></radialGradient>var svg = document.getElementById('svg');var animation0 = document.getElementById('animate0');svg.addEventListener('mouseenter', function(){ animation0.beginElement(); });var animation1 = document.getElementById('animate1');svg.addEventListener('mouseenter', function(){ animation1.beginElement(); });var animation2 = document.getElementById('animate2');svg.addEventListener('mouseenter', function(){ animation2.beginElement(); });var animation3 = document.getElementById('animate3');svg.addEventListener('mouseenter', function(){ animation3.beginElement(); });var animation4 = document.getElementById('animate4');svg.addEventListener('mouseenter', function(){ animation4.beginElement(); });var animation5 = document.getElementById('animate5');svg.addEventListener('mouseenter', function(){ animation5.beginElement(); });var animation6 = document.getElementById('animate6');svg.addEventListener('mouseenter', function(){ animation6.beginElement(); });var animation7 = document.getElementById('animate7');svg.addEventListener('mouseenter', function(){ animation7.beginElement(); });var animation8 = document.getElementById('animate8');svg.addEventListener('mouseenter', function(){ animation8.beginElement(); });var animation9 = document.getElementById('animate9');svg.addEventListener('mouseenter', function(){ animation9.beginElement(); });var animation10 = document.getElementById('animate10');svg.addEventListener('mouseenter', function(){ animation10.beginElement(); });var animation11 = document.getElementById('animate11');svg.addEventListener('mouseenter', function(){ animation11.beginElement(); });var animation12 = document.getElementById('animate12');svg.addEventListener('mouseenter', function(){ animation12.beginElement(); });var animation13 = document.getElementById('animate13');svg.addEventListener('mouseenter', function(){ animation13.beginElement(); });var animation14 = document.getElementById('animate14');svg.addEventListener('mouseenter', function(){ animation14.beginElement(); });3d旋转相册效果展⽰:代码展⽰:<div class="hovertreeinfo"><h2></h2></div><!-- 仅⾃动播放⾳乐 --><!--<audio loop src="img/qianyuqianxun.mp3" id="audio" autoplay preload="auto">该浏览器不⽀持audio属性</audio>--><audio loop src="img\qianyuqianxun.mp3" id="audio" controls autoplay preload="auto">该浏览器不⽀持audio属性</audio><script type="text/javascript">//--创建页⾯监听，等待微信端页⾯加载完毕触发⾳频播放document.addEventListener('DOMContentLoaded', function () {function audioAutoPlay() {var audio = document.getElementById('audio');audio.play();document.addEventListener("WeixinJSBridgeReady", function () {audio.play();}, false);}audioAutoPlay();});//--创建触摸监听，当浏览器打开页⾯时，触摸屏幕触发事件，进⾏⾳频播放document.addEventListener('touchstart', function () {function audioAutoPlay() {var audio = document.getElementById('audio');audio.play();}audioAutoPlay();});</script><!--/*外层最⼤容器*/--><div class="wrap"><!-- /*包裹所有元素的容器*/--><div class="cube"><!--前⾯图⽚ --><div class="out_front"><img src="img/img01.jpg " class="pic" /></div><!--后⾯图⽚ --><div class="out_back"><img src="img/img02.jpg" class="pic"/></div><!--左图⽚ --><div class="out_left"><img src="img/img03.jpg" class="pic" /></div><div class="out_right"><img src="img/img04.jpg" class="pic" /></div><div class="out_top"><img src="img/img05.jpg" class="pic" /></div><div class="out_bottom"><img src="img/img06.jpg" class="pic" /><!--⼩正⽅体 --><span class="in_front"><img src="img/img07.jpg" class="in_pic" /></span><span class="in_back"><img src="img/img08.jpg" class="in_pic" /></span><span class="in_left"><img src="img/img09.jpg" class="in_pic" /></span><span class="in_right"><img src="img/img10.jpg" class="in_pic" /></span><span class="in_top"><img src="img/img11.jpg" class="in_pic" /></span><span class="in_bottom"><img src="img/img12.jpg" class="in_pic" /></span></div></div>点击爱⼼散开动画告⽩特效效果展⽰:代码展⽰:<svg height="320" width="320" class="like" onclick="document.body.classList.toggle('liked')"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90" fill="white"> <!-- 80 by 70 --> </svg><!-- DECORATIONS (quite a lot of them) --><div class="dot dot-1"></div><div class="dot dot-2"></div><div class="dot dot-3"></div><div class="dot dot-4"></div><div class="dot dot-5"></div><div class="dot dot-6"></div><div class="dot dot-7"></div><div class="dot dot-8"></div>雷电打出告⽩⽂字特效效果展⽰:代码展⽰:<div class="page page-thunder-to-text"><input id="input" type="text" maxlength="24" placeholder="I love you!"><canvas id="canvas"></canvas></div><script>let canvas, ctx, w, h, thunder, text, particles, input;function Thunder(options) {options = options || {};this.lifespan = options.lifespan || Math.round(Math.random() * 10 + 10);this.maxlife = this.lifespan;this.color = options.color || '#fefefe';this.glow = options.glow || '#2323fe';this.x = options.x || Math.random() * w;this.y = options.y || Math.random() * h;this.width = options.width || 2;this.direct = options.direct || Math.random() * Math.PI * 2;this.max = options.max || Math.round(Math.random() * 10 + 20);this.segments = [...new Array(this.max)].map(() => {return {direct: this.direct + (Math.PI * Math.random() * 0.2 - 0.1),length: Math.random() * 20 + 80,change: Math.random() * 0.04 - 0.02};});this.update = function(index, array) {this.segments.forEach(s => { (s.direct += s.change) && Math.random() > 0.96 && (s.change *= -1) });(this.lifespan > 0 && this.lifespan--) || this.remove(index, array);}this.render = function(ctx) {if (this.lifespan <= 0) return;ctx.beginPath();ctx.globalAlpha = this.lifespan / this.maxlife;ctx.strokeStyle = this.color;ctx.lineWidth = this.width;ctx.shadowBlur = 32;ctx.shadowColor = this.glow;ctx.moveTo(this.x, this.y);let prev = { x: this.x, y: this.y };this.segments.forEach(s => {const x = prev.x + Math.cos(s.direct) * s.length;const y = prev.y + Math.sin(s.direct) * s.length;prev = { x: x, y: y };ctx.lineTo(x, y);});ctx.stroke();ctx.closePath();ctx.shadowBlur = 0;const strength = Math.random() * 80 + 40;const light = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, strength); light.addColorStop(0, 'rgba(250, 200, 50, 0.6)');light.addColorStop(0.1, 'rgba(250, 200, 50, 0.2)');light.addColorStop(0.4, 'rgba(250, 200, 50, 0.06)');light.addColorStop(0.65, 'rgba(250, 200, 50, 0.01)');light.addColorStop(0.8, 'rgba(250, 200, 50, 0)');ctx.beginPath();ctx.fillStyle = light;ctx.arc(this.x, this.y, strength, 0, Math.PI * 2);ctx.fill();ctx.closePath();}this.remove = function(index, array) {array.splice(index, 1);}}粒⼦组合告⽩⽂字特效效果展⽰:代码展⽰:;(function(main) {var args = {};window.onload = function() {main(args);};})(function(args) {'use strict';var Box = function(x, y, w, h, s) {this.x = x;this.y = y;this.w = w;this.h = h;this.s = s;this.a = Math.random() * Math.PI * 2;this.hue = Math.random() * 360;};Box.prototype = {constructor: Box,update: function() {this.a += Math.random() * 0.5 - 0.25;this.x += Math.cos(this.a) * this.s;this.y += Math.sin(this.a) * this.s;this.hue += 5;if(this.x > WIDTH) this.x = 0;else if(this.x < 0) this.x = WIDTH;if(this.y > HEIGHT) this.y = 0;else if(this.y < 0) this.y = HEIGHT;},render: function(ctx) {ctx.save();ctx.fillStyle = 'hsla(' + this.hue + ', 100%, 50%, 1)';ctx.translate(this.x, this.y);ctx.rotate(this.a);ctx.fillRect(-this.w, -this.h / 2, this.w, this.h);ctx.restore();}};var Circle = function(x, y, tx, ty, r) {this.x = x;this.y = y;this.ox = x;this.oy = y;this.tx = tx;this.ty = ty;this.lx = x;this.ly = y;this.r = r;this.br = r;this.a = Math.random() * Math.PI * 2;this.sx = Math.random() * 0.5;this.sy = Math.random() * 0.5;this.o = Math.random() * 1;this.delay = Math.random() * 200;this.delayCtr = 0;this.hue = Math.random() * 360;};⼩熊拉⼿CSS3情⼈节动画表⽩特效效果展⽰:代码展⽰:<div class="stage"><div class="couple"><div class="heart floating"></div><div class="bear he"><div class="ear--1"></div><div class="ear--2"></div><div class="arm--1"></div><div class="arm--2"></div><div class="hand"></div><div class="body"></div><div class="muzzle"></div><div class="eye--1"></div><div class="eye--2"></div><div class="nose"></div><div class="mouth"></div><div class="leg--1"></div><div class="leg--2"></div></div><div class="bear she"><div class="ear--1"></div><div class="ear--2"></div><div class="arm--1"></div><div class="arm--2"></div><div class="body"></div><div class="muzzle"></div><div class="eye--1"></div><div class="eye--2"></div><div class="nose"></div><div class="mouth"></div><div class="leg--1"></div><div class="leg--2"></div></div></div></div>到此这篇关于七个基于JavaScript实现的情⼈节表⽩特效的⽂章就介绍到这了,更多相关JavaScript表⽩特效内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。
使⽤JavaScript实现长⽅形、直⾓三⾓形、平⾏四边形、等腰三⾓形、倒三⾓、数字三⾓形【循环嵌套的规律】 1、外层循环控制⾏数，内层循环控制每⾏中元素的个数。
【图形题思路】 1、确定图形有⼏⾏，⾏数即为外层循环次数； 2、确定每⾏中有⼏种元素组成，有⼏种元素表⽰有⼏个内层循环；3、确定每种元素的个数，这个个数即为每个内层元素循环次数。
如果每种元素的个数不固定，则找出每种元素的个数，与⾏号的关系，这个关系表达式即为内循环的最⼤值。
1、长⽅形1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title></title>6</head>7<body>8<script type="text/javascript">9/*10 *****11 *****12 *****13 *****14 *****15*/16for(var i=1;i<=5;i++){17 document.write("<br/>");18for(j=1;j<=5;j++){19 document.write("*");20 }21 }22</script>23</body>24</html>2、直⾓三⾓形1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title></title>6</head>7<body>8<script type="text/javascript">9/*10 *11 **12 ***13 ****14 *****15*/16for(i=1;i<=5;i++){17 document.write(" "+"<br/>");18for(j=1;j<=i;j++){19 document.write("*");20 }21 }22</script>23</body>24</html>3、平⾏四边形1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title></title>6</head>7<body>8<script type="text/javascript">9/*10 *****11 *****12 *****13 *****14 *****15*/16for(var i=1;i<=5;i++){17 document.write("<br/>");18for(var j=1;j<=i-1;j++) {19 document.write(" ");20 }21for (var k = 1; k <= 5; k++) {22 document.write("*");23 }24 }25</script>26</body>27</html>4、等腰三⾓形1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title></title>6</head>7<body>8<script type="text/javascript">9/*10 *11 ***12 *****13 *******14 *********15*/16for(var i=1;i<=5;i++){17 document.write("<br/>");18for(var j=1;j<=5-i;j++) {19 document.write(" ");20 }21for (var k = 1; k <=2*i-1; k++) {22 document.write("*");23 }24 }25</script>26</body>27</html>5、倒三⾓1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title></title>6</head>7<body>8<script type="text/javascript">9/*10 *********11 *******12 *****13 ***14 *15*/16for(var i=0;i<=5;i++){17 document.write("<br/>");18for(var j=0;j<=i;j++) {19 document.write(" ");20 }21for (var k = 1; k <=2*(5-i)-1; k++) {22 document.write("*");23 }24 }25</script>26</body>27</html>6、数字三⾓形1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title></title>6</head>7<body>8<script type="text/javascript">9/*10 111 12112 1232113 123432114 12345432115*/16for(var i=1;i<=5;i++){17for(var j=1;j<=5-i;j++) {18 document.write(" ");19 }20var num = 1;21// 递增的数22for(var k=1; k<=i; k++){23 document.write(num);24 num++;25 }26// 递减的数27 num -= 2;28for(var l=1; l<=i-1; l++){29 document.write(num);30 num--;31 }32// 回车33 document.write("<br>");34 }35</script>36</body>37</html>。
JSP作图38例1、JSP 绘制文本和线段<!--Fig. 6.04_01: basic.jsp功能: JSP 绘制文本和线段--><%@ page language="java" contentType="image/png;charset=GB2312"import="java.awt.image.*"import="java.awt.*"import="javax.imageio.*"%><%// 清空缓冲区response.reset();// 注意这里的MIME类型response.setContentType("image/png");// 创建一个 640X480 的图像int width = 640, height = 480;BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics();// 填充背景g.setColor(Color.WHITE);g.fillRect(0, 0, width, height);// 绘制文本g.setColor(Color.RED);// 绘制11条直线for (int i = 1; i <= 11; i++){g.drawLine(10, 10, 90, i * 10);}// 绘制1个三角形g.drawLine(160, 10, 110, 110);g.drawLine(160, 10, 210, 110);g.drawLine(110, 110, 210, 110);// 绘制1个矩形g.drawLine(230, 10, 230, 110);g.drawLine(230, 10, 330, 10);g.drawLine(330, 10, 330, 110);g.drawLine(230, 110, 330, 110);g.setFont(new Font("方正粗宋简体", Font.PLAIN, 25));g.drawString("JSP Web图表的绘制", 45, 145);// 部署图形g.dispose();// 利用ImageIO类的write方法对图像进行编码ServletOutputStream sos = response.getOutputStream();ImageIO.write(image, "PNG", sos);sos.close();%>2、绘制3D圆弧<!--Fig. 6.04_05_02: draw3DArcs.jsp功能:绘制3D圆弧--><%@ page language="java" contentType="image/png;charset=GB2312"import="java.awt.image.*"import="java.awt.*"import="javax.imageio.*"%><%// 清空缓冲区response.reset();// 注意这里的MIME类型response.setContentType("image/png");// 创建一个 640X480 的图像int width = 640, height = 480;BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics();// 填充背景g.setColor(Color.WHITE);g.fillRect(0, 0, width, height);g.setColor(Color.BLACK);//设置字体g.setFont(new Font("汉真广标", Font.PLAIN, 35));g.drawString("3D圆弧的画法", 10, 40);int thickness = 20; //设置3D圆弧的厚度for (int i = thickness - 1; i >= 0; i--){if (i == 0){g.setColor(new Color(255, 200, 20));}else{g.setColor(new Color(255, i * 10, i));}// 填充圆弧g.fillArc(40, 60 + i, 250, 160, 10, 70);g.fillArc(10, 60 + i, 250, 160, 110, 120);g.fillArc(40, 120 + i, 250, 160, 245, 105);}// 部署图形g.dispose();// 利用ImageIO类的write方法对图像进行编码ServletOutputStream sos = response.getOutputStream();ImageIO.write(image, "PNG", sos);sos.close();%>3、绘制3D椭圆及正圆<!--Fig. 6.04_04_02: draw3DOval.jsp功能:绘制3D椭圆及正圆--><%@ page language="java" contentType="image/png;charset=GB2312"import="java.awt.image.*"import="java.awt.*"import="javax.imageio.*"%><%// 清空缓冲区response.reset();// 注意这里的MIME类型response.setContentType("image/png");// 创建一个 640X480 的图像int width = 640, height = 480;BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics();// 填充背景g.setColor(Color.WHITE);g.fillRect(0, 0, width, height);g.setColor(Color.BLACK);//设置字体g.setFont(new Font("汉真广标", Font.PLAIN, 35));g.drawString("3D椭圆或正圆画法", 10, 40);int thickness = 20; //设置椭圆或正圆的厚度for (int i = thickness - 1; i >= 0; i--){g.setColor(new Color(255, i * 10, i));g.fillOval(10 + i, 80 - i, 150, 120);g.fillOval(210 + i, 60 + i, 150, 120);g.fillOval(30 - i, 230 - i, 150, 120);g.fillOval(230 - i, 210 + i, 150, 120);}// 部署图形g.dispose();// 利用ImageIO类的write方法对图像进行编码ServletOutputStream sos = response.getOutputStream();ImageIO.write(image, "PNG", sos);sos.close();%>4、绘制3D矩形1<!--Fig. 6.04_03_02: draw3DRect1.jsp功能:绘制3D矩形1--><%@ page language="java" contentType="image/png;charset=GB2312"import="java.awt.image.*"import="java.awt.*"import="javax.imageio.*"%><%// 清空缓冲区response.reset();// 注意这里的MIME类型response.setContentType("image/png");// 创建一个 640X480 的图像int width = 640, height = 480;BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics();// 填充背景//g.setColor(new Color(120,120,120));g.setColor(Color.YELLOW);g.fillRect(0, 0, width, height);//设置字体g.setColor(Color.BLACK);g.setFont(new Font("汉真广标", Font.PLAIN, 35));g.drawString("3D矩形画法1", 10, 40);g.setColor(Color.LIGHT_GRAY );//绘制空心凸出3D矩形g.draw3DRect(10, 60, 150, 120, true);// 绘制空心凹陷3D矩形g.draw3DRect( 210, 60, 150, 120, false );// 填充实心凸出3D矩形g.fill3DRect(10, 260, 150, 120, true);// 填充实心凹陷3D矩形g.fill3DRect( 210, 260, 150, 120, false );// 部署图形g.dispose();// 利用ImageIO类的write方法对图像进行编码ServletOutputStream sos = response.getOutputStream();ImageIO.write(image, "PNG", sos);sos.close();%>5、绘制3D矩形2<!--Fig. 6.04_03_03: draw3DRect2.jsp功能:绘制3D矩形2--><%@ page language="java" contentType="image/png;charset=GB2312"import="java.awt.image.*"import="java.awt.*"import="javax.imageio.*"%><%// 清空缓冲区response.reset();// 注意这里的MIME类型response.setContentType("image/png");// 创建一个 640X480 的图像int width = 640, height = 480;BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics();// 填充背景g.setColor(Color.WHITE);g.fillRect(0, 0, width, height);//设置字体g.setColor(Color.BLACK);g.setFont(new Font("汉真广标", Font.PLAIN, 35));g.drawString("3D矩形画法2", 10, 40);Color red = new Color(255, 0, 0); //设置绘制颜色为红色g.setColor(red.darker()); //重新设置当前颜色为深红色int thickness = 20; //设置矩形的厚度for (int i = thickness - 1; i >= 0; i--){g.fill3DRect(10 + i, 80 - i, 150, 120, true);g.fill3DRect(210 + i, 60 + i, 150, 120, true);g.fill3DRect(30 - i, 230 - i, 150, 120, true);g.fill3DRect(230 - i, 210 + i, 150, 120, true);}// 部署图形g.dispose();// 利用ImageIO类的write方法对图像进行编码ServletOutputStream sos = response.getOutputStream();ImageIO.write(image, "PNG", sos);sos.close();%>6、绘制圆弧<!--Fig. 6.04_05_01: drawArcs.jsp功能:绘制圆弧--><%@ page language="java" contentType="image/png;charset=GB2312"import="java.awt.image.*"import="java.awt.*"import="javax.imageio.*"%><%// 清空缓冲区response.reset();// 注意这里的MIME类型response.setContentType("image/png");// 创建一个 640X480 的图像int width = 640, height = 480;BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics();// 填充背景g.setColor(Color.WHITE);g.fillRect(0, 0, width, height);g.setColor(Color.BLACK);//设置字体g.setFont(new Font("汉真广标", Font.PLAIN, 35));g.drawString("圆弧的画法", 10, 40);// 绘制浅灰色矩形g.setColor(Color.LIGHT_GRAY);g.drawRect(10, 60, 150, 120);g.drawRect(210, 60, 120, 120);g.drawRect(10, 210, 150, 120);g.drawRect(210, 210, 120, 120);g.setColor(Color.BLUE);//绘制空心圆弧1g.drawArc(10, 60, 150, 120, 0, 360);// 绘制空心圆弧2g.drawArc(210, 60, 120, 120, 90, 270);g.setColor(Color.RED);//绘制空心圆弧3g.drawArc(10, 210, 150, 120, 30, - 150);// 绘制空心圆弧4g.drawArc(210, 210, 120, 120, - 90, - 270);// 绘制浅灰色矩形g.setColor(Color.LIGHT_GRAY);g.drawRect(350, 60, 150, 120);g.drawRect(510, 60, 120, 120);g.drawRect(350, 210, 150, 120);g.drawRect(510, 210, 120, 120);g.setColor(Color.BLUE);// 绘制实心圆弧1g.fillArc(350, 60, 150, 120, 0, 360);// 绘制实心圆弧2g.fillArc(510, 60, 120, 120, 90, 270);g.setColor(Color.RED);// 绘制实心圆弧3g.fillArc(350, 210, 150, 120, 30, - 150);// 绘制实心圆弧4g.fillArc(510, 210, 120, 120, - 90, - 270);// 部署图形g.dispose();// 利用ImageIO类的write方法对图像进行编码ServletOutputStream sos = response.getOutputStream();ImageIO.write(image, "PNG", sos);sos.close();%>7、绘制立方体<!--Fig. 6.04_08: drawCube.jsp功能:绘制立方体--><%@ page language="java" contentType="image/png;charset=GB2312"import="java.awt.image.*"import="java.awt.*"import="javax.imageio.*"%><%!int baseXPts = 10, baseYPts = 200; // 缺省的立方体基准点坐标int width = 100; // 缺省的立方体的宽度int height = 120; // 缺省的立方体的高度int thickness = 30; // 缺省的立方体的厚度int alpha = 45; // 缺省的平行四边形的夹角int offsetX = 0; // 偏移量Xint offsetY = 0; // 偏移量Yfinal int PARALLELOGRAM_POINT_NUMBER = 4; // 平行四边形的端点数目// 顶部平行四边形端点的X坐标数组int[] pTopX = new int[PARALLELOGRAM_POINT_NUMBER];// 顶部平行四边形端点的Y坐标数组int[] pTopY = new int[PARALLELOGRAM_POINT_NUMBER];// 右侧面平行四边形端点的X坐标数组int[] pRightX = new int[PARALLELOGRAM_POINT_NUMBER];// 右侧面平行四边形端点的Y坐标数组int[] pRightY = new int[PARALLELOGRAM_POINT_NUMBER];// 立方体的方向//final int UP = 1, RIGHT = 2, DOWN = 3, LEFT = 4;// 立方体的绘制风格final int OUTLINE = 1, FILL = 2, MIXED = 3;Color rFrontFillColor = new Color(178, 0, 0); // 缺省的填充颜色 Color pTopFillColor = Color.RED; // 缺省的填充颜色Color pRightFillColor = new Color(124, 0, 0); // 缺省的填充颜色 Color outlineColor = Color.LIGHT_GRAY; //缺省的立方体轮廓颜色// 设置整个立方体的轮廓颜色public void setOutlineColor(Color outlineColor){this.outlineColor = outlineColor;// 设置正面实心矩形的填充颜色public void setFrontFillColor(Color rFrontFillColor) {this.rFrontFillColor = rFrontFillColor;}// 设置顶部实心平行四边形的填充颜色public void setPTopFillColor(Color pTopFillColor){this.pTopFillColor = pTopFillColor;}// 设置右侧面实心平行四边形的填充颜色public void setPRightFillColor(Color pRightFillColor) {this.pRightFillColor = pRightFillColor;}// 设置基准点的坐标public void setBasePoint(int baseXPts, int baseYPts) {this.baseXPts = baseXPts;this.baseYPts = baseYPts;}// 设置立方体的宽度public void setWidth(int width){this.width = width;}// 设置立方体的高度public void setHeight(int height){this.height = height;}// 设置立方体的厚度public void setThickness(int thickness){this.thickness = thickness;// 设置平行四边形的夹角alphapublic void setAngle(int alpha){this.alpha = alpha;}// 计算offsetX和offsetY的值public void calculateOffset(){offsetX = (int)(Math.cos(alpha * Math.PI / 180) * thickness + 0.5);offsetY = (int)(Math.sin(alpha * Math.PI / 180) * thickness + 0.5);}// 设置绘制正面矩形所需的数据public void buildRFront(){pRightX[0] = baseXPts + width;pRightY[0] = baseYPts;pRightX[1] = pRightX[0];pRightY[1] = baseYPts - height;pTopX[0] = baseXPts;pTopY[0] = pRightY[1];}// 设置绘制顶部平行四边形所需的数据public void buildPTop(){pTopX[1] = pRightX[1];pTopY[1] = pRightY[1];pTopX[2] = pTopX[1] + offsetX;pTopY[2] = pTopY[1] - offsetY;pTopX[3] = pTopX[0] + offsetX;pTopY[3] = pTopY[2];}// 设置绘制右侧面平行四边形所需的数据public void buildPRight(){pRightX[2] = pTopX[2];pRightY[2] = pTopY[2];pRightX[3] = pRightX[2];pRightY[3] = pRightY[2] + height;}// 绘制立方体public void drawCube(int cubeStyle, Graphics g){calculateOffset();buildRFront();buildPTop();buildPRight();switch (cubeStyle){case 1:g.setColor(outlineColor);g.drawPolygon(pTopX, pTopY, PARALLELOGRAM_POINT_NUMBER);g.drawRect(pTopX[0], pTopY[0], width, height);g.drawPolygon(pRightX, pRightY, PARALLELOGRAM_POINT_NUMBER);break;case 2:g.setColor(pTopFillColor);g.fillPolygon(pTopX, pTopY, PARALLELOGRAM_POINT_NUMBER);g.setColor(rFrontFillColor);g.fillRect(pTopX[0], pTopY[0], width, height);g.setColor(pRightFillColor);g.fillPolygon(pRightX, pRightY, PARALLELOGRAM_POINT_NUMBER);break;case 3:g.setColor(pTopFillColor);g.fillPolygon(pTopX, pTopY,PARALLELOGRAM_POINT_NUMBER);g.setColor(rFrontFillColor);g.fillRect(pTopX[0], pTopY[0], width, height);g.setColor(pRightFillColor);g.fillPolygon(pRightX, pRightY,PARALLELOGRAM_POINT_NUMBER);g.setColor(outlineColor);g.drawPolygon(pTopX, pTopY,PARALLELOGRAM_POINT_NUMBER);g.drawRect(pTopX[0], pTopY[0], width, height);g.drawPolygon(pRightX, pRightY,PARALLELOGRAM_POINT_NUMBER);break;}}%><%// 清空缓冲区response.reset();// 注意这里的MIME类型response.setContentType("image/png");// 创建一个 640X480 的图像int width = 640, height = 480;BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics();// 填充背景g.setColor(Color.WHITE);g.fillRect(0, 0, width, height);g.setColor(Color.BLACK);// 设置字体g.setFont(new Font("汉真广标", Font.PLAIN, 35));g.drawString("立方体的画法", 10, 35);// 绘制默认立方体drawCube(FILL, g);// 绘制立方体2setBasePoint(150, 300);setWidth(80);setHeight(220);setThickness(40);setAngle(60);setPTopFillColor(new Color(0, 0, 255));setFrontFillColor(new Color(0, 0, 178));setPRightFillColor(new Color(0, 0, 124));drawCube(FILL, g);// 绘制立方体3setBasePoint(280, 300);setOutlineColor(Color.ORANGE);drawCube(OUTLINE, g);// 绘制立方体4setBasePoint(400, 280);setWidth(120);setHeight(180);setThickness(20);setAngle(30);setPTopFillColor(Color.GREEN);setFrontFillColor(Color.MAGENTA);setPRightFillColor(Color.PINK);setOutlineColor(Color.BLACK);drawCube(MIXED, g);// 部署图形g.dispose();// 利用ImageIO类的write方法对图像进行编码ServletOutputStream sos = response.getOutputStream();ImageIO.write(image, "PNG", sos);sos.close();%>8、绘制圆柱体<!--Fig. 6.04_04_03: drawCylinder.jsp功能:绘制圆柱体--><%@ page language="java" contentType="image/png;charset=GB2312"import="java.awt.image.*"import="java.awt.*"import="javax.imageio.*"%><%!int rectX = 10, rectY = 120;int rectWidth = 100, rectHeight = 250;int ovalHeight = 40;int ovalX1, ovalY1, ovalX2, ovalY2, ovalWidth;Color outlineColor = Color.LIGHT_GRAY;Color fillColor = Color.RED;// 计算椭圆的绘制参数public void calculateOvalCoordinate(){ovalWidth = this.rectWidth;ovalX1 = this.rectX;ovalY1 = this.rectY - ovalHeight / 2;ovalX2 = this.rectX;ovalY2 = ovalY1 + rectHeight;}// 设置矩形左上角的坐标public void resetRectCoordinate(int rectX, int rectY){this.rectX = rectX;this.rectY = rectY;}// 绘制圆柱体public void drawCylinder(Graphics g){// 计算椭圆的坐标calculateOvalCoordinate();// 绘制下方椭圆g.setColor(fillColor);g.fillOval(ovalX2, ovalY2, ovalWidth, ovalHeight);g.setColor(outlineColor);g.drawOval(ovalX2, ovalY2, ovalWidth, ovalHeight);// 绘制中间的矩形g.setColor(fillColor);g.fillRect(rectX, rectY, rectWidth, rectHeight);// 绘制上方的椭圆g.setColor(g.getColor().darker());g.fillOval(ovalX1, ovalY1, ovalWidth, ovalHeight);g.setColor(outlineColor);g.drawOval(ovalX1, ovalY1, ovalWidth, ovalHeight);}%><%// 清空缓冲区response.reset();// 注意这里的MIME类型response.setContentType("image/png");// 创建一个 640X480 的图像int width = 640, height = 480;BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics();// 填充背景g.setColor(Color.WHITE);g.fillRect(0, 0, width, height);g.setColor(Color.BLACK);// 设置字体g.setFont(new Font("汉真广标", Font.PLAIN, 35));g.drawString("圆柱体画法", 10, 40);// 调用drawCylinder方法，绘制圆柱体drawCylinder(g);rectHeight = 350;resetRectCoordinate(250, 50);fillColor = Color.BLUE;// 调用drawCylinder方法，绘制圆柱体drawCylinder(g);// 部署图形g.dispose();// 利用ImageIO类的write方法对图像进行编码ServletOutputStream sos = response.getOutputStream();ImageIO.write(image, "PNG", sos);sos.close();%>9、绘制椭圆及正圆<!--Fig. 6.04_04_01: drawOval.jsp功能:绘制椭圆及正圆--><%@ page language="java" contentType="image/png;charset=GB2312"import="java.awt.image.*"import="java.awt.*"import="javax.imageio.*"%><%// 清空缓冲区response.reset();// 注意这里的MIME类型response.setContentType("image/png");// 创建一个 640X480 的图像int width = 640, height = 480;BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics();// 填充背景g.setColor(Color.WHITE);g.fillRect(0, 0, width, height);g.setColor(Color.BLACK);//设置字体g.setFont(new Font("汉真广标", Font.PLAIN, 35));g.drawString("绘制普通椭圆及正圆", 10, 40);// 绘制普通椭圆g.setColor( Color.LIGHT_GRAY );g.drawRect( 10, 60, 150, 120 );g.setColor( Color.RED );g.drawOval( 10, 60, 150, 120 );// 绘制正圆g.setColor( Color.LIGHT_GRAY );g.drawRect( 210, 60, 120, 120 );g.setColor( Color.RED );g.drawOval( 210, 60, 120, 120 );// 填充普通椭圆g.setColor( Color.LIGHT_GRAY );g.drawRect( 10, 260, 150, 120 );g.setColor( Color.RED );g.fillOval( 10, 260, 150, 120 );// 填充正圆g.setColor( Color.LIGHT_GRAY );g.drawRect( 210, 260, 120, 120 );g.setColor( Color.RED );g.fillOval( 210, 260, 120, 120 );// 部署图形g.dispose();// 利用ImageIO类的write方法对图像进行编码ServletOutputStream sos = response.getOutputStream();ImageIO.write(image, "PNG", sos);sos.close();%>10、绘制多边形<!--Fig. 6.04_06_01: drawPloygon.jsp功能:绘制多边形--><%@ page language="java" contentType="image/png;charset=GB2312"import="java.awt.image.*"import="java.awt.*"import="javax.imageio.*"%><%// 清空缓冲区response.reset();// 注意这里的MIME类型response.setContentType("image/png");// 创建一个 640X480 的图像int width = 640, height = 480;BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics();// 填充背景g.setColor(Color.WHITE);g.fillRect(0, 0, width, height);g.setColor(Color.BLACK);// 设置字体g.setFont(new Font("汉真广标", Font.PLAIN, 35));g.drawString("多边形的画法", 10, 35);g.setColor(Color.BLUE);// 绘制一个五角星int[] xValues = { 55, 67, 109, 73, 83, 55, 27, 37, 1, 43 }; int[] yValues = { 70, 106, 106, 124, 166, 142, 166, 124, 106, 106 };Polygon fiveStar = new Polygon(xValues, yValues,xValues.length);g.drawPolygon(fiveStar);// 空心多边形的画法2，创建一个新的不包含任何顶点的Ploygon实例Polygon sharp = new Polygon();sharp.addPoint(185, 45);sharp.addPoint(195, 110);sharp.addPoint(290, 160);sharp.addPoint(220, 180);sharp.addPoint(150, 140);g.setColor(Color.RED);g.drawPolygon(sharp);g.setColor(Color.BLUE);// 填充一个五角星int[] xValues2 = { 55, 67, 109, 73, 83, 55, 27, 37, 1, 43 }; int[] yValues2 = { 220, 256, 256, 274, 316, 292, 316, 274, 256, 256 };Polygon fiveStar2 = new Polygon(xValues2, yValues2,xValues2.length);g.fillPolygon(fiveStar2);// 填充一个多边形Polygon sharp2 = new Polygon();sharp2.addPoint(185, 195);sharp2.addPoint(195, 260);sharp2.addPoint(290, 310);sharp2.addPoint(220, 330);sharp2.addPoint(150, 290);g.setColor(Color.RED);g.fillPolygon(sharp2);// 部署图形g.dispose();// 利用ImageIO类的write方法对图像进行编码ServletOutputStream sos = response.getOutputStream();ImageIO.write(image, "PNG", sos);sos.close();%>11、绘制折线<!--Fig. 6.04_06_02: drawPloyline.jsp功能:绘制折线--><%@ page language="java" contentType="image/png;charset=GB2312"import="java.awt.image.*"import="java.awt.*"import="javax.imageio.*"%><%// 清空缓冲区response.reset();// 注意这里的MIME类型response.setContentType("image/png");// 创建一个 640X480 的图像int width = 640, height = 480;BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics();// 填充背景g.setColor(Color.WHITE);g.fillRect(0, 0, width, height);g.setColor(Color.BLACK);// 设置字体g.setFont(new Font("汉真广标", Font.PLAIN, 35));g.drawString("折线的画法", 10, 35);g.setColor(Color.RED);// 绘制一条折线int[] xValues = { 20, 67, 90, 130, 280, 195, 267 };int[] yValues = { 70, 116, 176, 154, 46, 142, 126 };g.drawPolyline(xValues, yValues, 7);// 部署图形g.dispose();// 利用ImageIO类的write方法对图像进行编码ServletOutputStream sos = response.getOutputStream();ImageIO.write(image, "PNG", sos);sos.close();%>12、绘制矩形<!--Fig. 6.04_03_01: drawRect.jsp功能:绘制矩形--><%@ page language="java" contentType="image/png;charset=GB2312"import="java.awt.image.*"import="java.awt.*"import="javax.imageio.*"%><%// 清空缓冲区response.reset();// 注意这里的MIME类型response.setContentType("image/png");// 创建一个 640X480 的图像int width = 640, height = 480;BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics();// 填充背景g.setColor(Color.WHITE);g.fillRect(0, 0, width, height);//设置字体g.setColor(Color.BLACK);g.setFont(new Font("汉真广标", Font.PLAIN, 35));g.drawString("矩形的画法", 10, 40);//绘制方角矩形g.setColor(Color.RED);g.drawRect(10, 60, 150, 120);// 绘制圆角矩形1g.setColor( Color.LIGHT_GRAY );g.drawRect( 210, 60, 150, 120 );g.setColor( Color.BLUE );g.drawRoundRect( 210, 60, 150, 120, 60, 40);// 绘制圆角矩形2g.setColor( Color.LIGHT_GRAY );g.drawRect( 410, 60, 150, 120 );g.setColor( Color.BLUE );g.drawRoundRect( 410, 60, 150, 120, 80, 80);// 填充方角矩形g.setColor(Color.RED);g.fillRect(10, 260, 150, 120);// 填充圆角矩形1g.setColor( Color.LIGHT_GRAY );g.drawRect( 210, 260, 150, 120 );g.setColor( Color.BLUE );g.fillRoundRect( 210, 260, 150, 120, 60, 40);// 填充圆角矩形2g.setColor( Color.LIGHT_GRAY );g.drawRect( 410, 260, 150, 120 );g.setColor( Color.BLUE );g.fillRoundRect( 410, 260, 150, 120, 80, 80);// 部署图形g.dispose();// 利用ImageIO类的write方法对图像进行编码ServletOutputStream sos = response.getOutputStream();ImageIO.write(image, "PNG", sos);sos.close();%>13、绘制三角形<!--Fig. 6.04_07_01: drawTriangle.jsp功能:绘制三角形--><%@ page language="java" contentType="image/png;charset=GB2312"import="java.awt.image.*"import="java.awt.*"import="javax.imageio.*"%><%!int[] TriangleXValues = new int[3];int[] TriangleYValues = new int[3];int alpha = 60; //等腰三角形的底角int baseLine = 80; //等腰三角形的底边长int basePointX = 80; // 缺省的绘制横坐标int basePointY = 100; // 缺省的绘制纵坐标Color fillColor = Color.BLACK; // 缺省的填充颜色Color outlineColor = Color.BLACK; //缺省的轮廓颜色public void drawTrigangle(int x, int y, int triangleDirection, int triangleStryle, Graphics g){// 计算偏移量int offset = (int)(baseLine / 2 * Math.tan(alpha * Math.PI / 180));// 计算三角形3个顶点的坐标switch (triangleDirection){case 1:TriangleXValues[0] = x - baseLine / 2;TriangleYValues[0] = y;TriangleXValues[1] = x + baseLine / 2;TriangleYValues[1] = y;TriangleXValues[2] = x;TriangleYValues[2] = y - offset;break;case 2:TriangleXValues[0] = x;TriangleYValues[0] = y - baseLine / 2;TriangleXValues[1] = x;TriangleYValues[1] = y + baseLine / 2;TriangleXValues[2] = x + offset;TriangleYValues[2] = y;break;case 3:TriangleXValues[0] = x - baseLine / 2;TriangleYValues[0] = y;TriangleXValues[1] = x + baseLine / 2;TriangleYValues[1] = y;TriangleXValues[2] = x;TriangleYValues[2] = y + offset;break;case 4:TriangleXValues[0] = x;TriangleYValues[0] = y - baseLine / 2;TriangleXValues[1] = x;TriangleYValues[1] = y + baseLine / 2;TriangleXValues[2] = x - offset;TriangleYValues[2] = y;break;}// 根据三角形的坐标及风格进行绘制switch (triangleStryle){case 1:g.setColor(outlineColor);g.drawPolygon(TriangleXValues, TriangleYValues, 3); break;case 2:g.setColor(fillColor);g.fillPolygon(TriangleXValues, TriangleYValues, 3); break;case 3:g.setColor(fillColor);g.fillPolygon(TriangleXValues, TriangleYValues, 3);g.setColor(outlineColor);g.drawPolygon(TriangleXValues, TriangleYValues, 3); break;}}public void setBaseLine(int baseLine){this.baseLine = baseLine;}public void setFillColor(Color fillColor){this.fillColor = fillColor;}public void setOutlineColor(Color outlineColor){this.outlineColor = outlineColor;}public void setAlpha(int alpha){this.alpha = alpha;}public void setBasePointX(int x){this.basePointX = x;}public void setBasePointY(int y){this.basePointY = y;}%><%// 清空缓冲区response.reset();// 注意这里的MIME类型response.setContentType("image/png");// 创建一个 200X160 的图像int width = 200, height = 120;BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics();// 填充背景g.setColor(Color.WHITE);g.fillRect(0, 0, width, height);setFillColor(Color.RED);// 获取客户端提交的等腰三角形的基准点参数String basePointXString = request.getParameter("x");String basePointYString = request.getParameter("y");if (basePointXString != null && basePointYString != null){setBasePointX(Integer.parseInt(basePointXString));setBasePointY(Integer.parseInt(basePointYString));}// 获取客户端提交的等腰三角形的底角参数String alphaString = request.getParameter("alpha");if (alphaString != null){setAlpha(Integer.parseInt(alphaString));}// 获取客户端提交的等腰三角形的底边长度参数String baseLineString =request.getParameter("baseLine");if (baseLineString != null){this.baseLine = Integer.parseInt(baseLineString);}// 获取客户端提交的等腰三角形的方向参数String directionString =request.getParameter("direction");int direction = 1;if (directionString != null){direction = Integer.parseInt(directionString);}// 获取客户端提交的等腰三角形的绘制风格参数String styleString = request.getParameter("style");int style = 1;if (directionString != null){style = Integer.parseInt(styleString);}// 绘制三角形drawTrigangle(basePointX, basePointY, direction, style, g);// 部署图形g.dispose();// 利用ImageIO类的write方法对图像进行编码ServletOutputStream sos = response.getOutputStream();ImageIO.write(image, "PNG", sos);sos.close();%>14、绘制多种效果的字体<!--Fig. 6.04_02_02: fontEffect.jsp功能: 绘制多种效果的字体--><%@ page language="java" contentType="image/png;charset=GB2312"import="java.awt.image.*"import="java.awt.*"import="javax.imageio.*"import="java.util.*"%><%!int ShiftNorth(int p, int distance){return (p - distance);}int ShiftSouth(int p, int distance){return (p + distance);。
canvas——javascript实现各种复杂规律图案 在HTML5中新增的元素中，个⼈最喜欢的就是canvas元素。
这个元素负责在页⾯⾥设定⼀个区域，然后在这个区域内通过javascript动态绘制图形。
⽬前⼤部分浏览器新版本都⽀持此元素。
canvas元素具备绘图能⼒的上下⽂环境，另外还建议了⼀个名为WebGL的3D上下⽂，但是⽬前⼤部分浏览器对canvas的3D上下⽂⽀持不够好，特别是⽼版本的浏览器，甚⾄在window xp中缺少⽀持必要的绘图驱动程序。
那么，今天我们就在2d上下⽂中，共同探讨下这个⾮常有意思的新元素。
要使⽤canvas元素，必须先设置其width和height，默认值分别为300和150。
设置的时候有点奇怪，使⽤CSS设置不成功，必须使⽤内联属性style⽅式。
这⾥就不追究原因，猜想是对元素的⽀持不够完善。
要在这个画布canvas上绘图，就先得取得绘图上下⽂，⽽取得绘图上下⽂对象的引⽤，就得先调⽤getContent()⽅法并传⼊上下⽂的名字如：2d。
记得保持良好的编程习惯，使⽤新⽅法时，先检测⽅法是否存在，其中的好处相信⼤家都知道。
2d上下⽂中绘制的图形，⾮常神奇吧！那接下来看看怎么做到的？ 使⽤2d上下⽂提供的⽅法，可以绘制⼀些相对简单的图形，例如：矩形、弧形、圆形、路径等。
上⾯图形其实也是路径，只不过加⼊了⼀些相对⿇烦的三⾓函数的算法。
2D上下⽂中的坐标起始于canvas元素的左上⾓。
所有的坐标值都是基于这个点，当然可以通过上下⽂中提供的translate()改变原点坐标。
⼤部分2D上下⽂操作都属于填充和描边两个操作，⽽操作的结果⼜取决于两个属性：fillStyle和strokeStyle。
这两个属性的值可以为字符串、渐变对象和模式对象。
绘制矩形 与矩形相关的⽅法包括：fillRect()、strokeRect()和clearRect()。
这三个⽅法都接受四个参数：X坐标、Y坐标、宽度、⾼度，默认单位像素，所以后⾯不⽤再跟单位。
JavaScript图形实例：四瓣花型图案设有坐标计算公式如下：X=L*(1+SIN(4α))*COS(α)Y=L*(1+SIN(4α))*SIN(α)用循环依次取α值为0~2π，计算出X和Y,在canvas画布中对坐标位置（X,Y）描点，可绘制出一个曲线图形。
编写HTML文件内容如下：<!DOCTYPE html><head><title>曲线图形</title><script type="text/javascript">function draw(id){var canvas=document.getElementById(id);if (canvas==null)return false;var context=canvas.getContext('2d');context.fillStyle="#EEEEFF";context.fillRect(0,0,400,300);for (i=0;i<=720;i++){a=i*Math.PI/360;e=80*(1+Math.sin(4*a));x1=200+e*Math.cos(a);y1=150+e*Math.sin(a);context.fillText('.',x1,y1);context.fillStyle="red";}}</script></head><body onload="draw('myCanvas');"><canvas id="myCanvas" width="400" height="300">您的浏览器不支持canvas！</canvas></body></html>上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图1所示的曲线。
图1 用三角函数绘制曲线1．四瓣花型图案先在HTML页面中设置一个画布。
<canvas id="myCanvas" width="400" height="300"></canvas>再在定义的这块400*300的canvas（画布）上面用循环（0~2π）绘制四瓣花型图案。
绘制图案的基本思想是：设立坐标计算公式如下：X1=L*(1+SIN(4α))*COS(α)Y1=L*(1+SIN(4α))*SIN(α)X2=L*(1+SIN(4α))*COS(α+π/5)Y2=L*(1+SIN(4α))*SIN(α+π/5)以（X1,Y1）和（X2,Y2）作为端点坐标绘制直线段。
可编写如下的HTML代码。
<!DOCTYPE html><head><title>四瓣花型图案</title><script type="text/javascript">function draw(id){var canvas=document.getElementById(id);if (canvas==null)return false;var context=canvas.getContext('2d');context.fillStyle="#EEEEFF";context.fillRect(0,0,400,300);context.strokeStyle="red";context.lineWidth=1;context.beginPath();for (i=0;i<=720;i++){a=i*Math.PI/360;e=80*(1+Math.sin(4*a));x1=200+e*Math.cos(a);x2=200+e*Math.cos(a+Math.PI/5);y1=150+e*Math.sin(a);y2=150+e*Math.sin(a+Math.PI/5);context.moveTo(x1,y1);context.lineTo(x2,y2);}context.closePath();context.stroke();}</script></head><body onload="draw('myCanvas');"><canvas id="myCanvas" width="400" height="300">您的浏览器不支持canvas！</canvas></body></html>将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML 代码的html文件，可以看到在浏览器窗口中绘制出如图2所示的四瓣花型图案。
图2 四瓣花型图案在上面的代码中语句“e=80*(1+Math.sin(4*a));”中的4表示绘制四瓣花型图案，若将4改写为3~8之间的任一整数，可以画出3~8瓣花型图案，如图3所示。
图3 3瓣花型、5瓣花型、6瓣花型图案2．瓣顶有折皱的四瓣花型图案我们可以给绘制的花瓣图案加上变形系数，即把前面的代码中的语句“e=80*(1+Math.sin(4*a));”改写为“e=80*(1+Math.sin(12*a));”。
完整的HTML代码如下。
<!DOCTYPE html><head><title>瓣顶有折皱的四瓣花型图案</title><script type="text/javascript">function draw(id){var canvas=document.getElementById(id);if (canvas==null)return false;var context=canvas.getContext('2d');context.fillStyle="#EEEEFF";context.fillRect(0,0,400,300);context.strokeStyle="red";context.lineWidth=1;context.beginPath();for (i=0;i<=720;i++){a=i*Math.PI/360;e=80*(1+Math.sin(12*a)/4);f=e*(1+Math.sin(4*a));x1=200+f*Math.cos(a);x2=200+f*Math.cos(a+Math.PI/5);y1=150-f*Math.sin(a);y2=150-f*Math.sin(a+Math.PI/5);context.moveTo(x1,y1);context.lineTo(x2,y2);}context.closePath();context.stroke();}</script></head><body onload="draw('myCanvas');"><canvas id="myCanvas" width="400" height="300">您的浏览器不支持canvas！</canvas></body></html>在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图4所示的瓣顶有折皱的四瓣花型图案。
图4 瓣顶有折皱的四瓣花型图案将上面JavaScript代码中的语句“e=80*(1+Math.sin(12*a)/4);”改写为“e=80*(1+Math.cos(12*a)/4);”即SIN函数改用COS函数，将在浏览器窗口中绘制出如图5所示的变形四瓣花型图案1。
图5 变形的四瓣花型图案1若再将JavScript代码中的语句“y1=150-f*Math.sin(a);”改写为“y1=150-f*Math.sin(a)/2;”，语句“y2=150-f*Math.sin(a+Math.PI/5);”改写为“y2=150-f*Math.sin(a+Math.PI/5)/2;”，即图形的垂直方向上压缩一半，将在浏览器窗口中绘制出如图6所示的变形四瓣花型图案2。
图6 变形的四瓣花型图案23．可设置参数的变形的多瓣花型图案从上面的程序运行示例可以看出，绘制花瓣图案时，可以设置花瓣数，还可以设置花瓣的变形系数。
我们可以通过在浏览器窗口的页面中输入相应参数值，然后单击“确定”按钮绘制花瓣图案。
编写的HTML文件如下。
<!DOCTYPE html><head><title>可设置参数的变形的多瓣花型图案</title><script type="text/javascript">function draw(id){var canvas=document.getElementById(id);if (canvas==null)return false;var context=canvas.getContext('2d');context.fillStyle="#EEEEFF";context.fillRect(0,0,400,300);context.strokeStyle="red";context.lineWidth=1;context.beginPath();var n=eval(document.myForm.petalNum.value);var k=eval(document.myForm.shape.value);for (i=0;i<=720;i++){a=i*Math.PI/360;e=80*(1+Math.sin(n*k*a)/4);f=e*(1+Math.sin(n*a));x1=200+f*Math.cos(a);x2=200+f*Math.cos(a+Math.PI/5);y1=150-f*Math.sin(a);y2=150-f*Math.sin(a+Math.PI/5);context.moveTo(x1,y1);context.lineTo(x2,y2);}context.closePath();context.stroke();}</script></head><body><form name="myForm">花瓣数<input type=number name="petalNum" value=4 size=3>变形系数：<input type=number name="shape" value=1 size=3><input type=button value="确定" onClick="draw('myCanvas');"></form><br><canvas id="myCanvas" width="500" height="300">您的浏览器不支持canvas！</canvas></body></html>在浏览器中打开包含这段HTML代码的html文件，在表单的“花瓣数”数字框中输入“4”，“变形系数”数字框中输入“2”，单击“确定”按钮，可以看到在浏览器窗口中绘制出如图7所示的变形四瓣花型图案3。
