js随机形状（用javascript代码编写 一个等腰三角形）

本文目录

• 用javascript代码编写 一个等腰三角形
• javascript如何画图形
• 怎么用javascript语言编程一个爱心形状呢

用javascript代码编写 一个等腰三角形

《html》
《head》
《title》javascript----等腰三角形《/title》
《/head》
《body》
《script》

var i=0; //行控制
var j=0; //列控制
var k=0; //形状控制
/*思路：先输出类似99乘法口诀表的形状，然后和你的目标形状对比，找到规律，进行控制，我这个估计是比较土的方法，您可以去网上在搜搜更精简的方式*/
for(i=0;i《10;i++){

for(k=10;k》i;k--){
document.write(" ");
}

for(j=0;j《i;j++){
document.write(" *");
}
document.write("《br/》");
}

《/script》
《/body》
《/html》

javascript如何画图形

这个问题你用baidu搜索一下，有很多的教程。。
***隐藏网址***
1.
JAVASCRIPT经常通过用户提供的数据动态地生成条形图。总的来说这是由于条形图的简洁，它只是简单地由不确定长度的图形组成。我们使用JAVASCRIPT动态地画出每个图形，每个图形的长度和用户输入的数据有关。
我们需要的是以一个1x15的图形作为开始：
如果我想要拉长这幅图象到 50x15 ，我使用 JavaScript 这样做：
《script》
document.write(《img src="poll.gif" width="50" height="15"》’)
《/script》
这就形成了动态图形的基础。这是一个我用JAVASCRIPT写的一个简单的脚本，它用来说明了图形创建的例子。
《script》
var graphtext=new Array("Jill", "Bob", "Tony") //图形项目
var graphvalue=new Array("60", "45", "95") //图形值 (使用的是百分比，例如70=70%)
var barlength=200
for (i=0;i《graphtext.length;i++)
document.write (graphtext/100*barlength+’" height="15"》《br》’)
《/script》
Jill:
Bob:
Tony
代码的关键之处在于：width="’+graphvalue/100*barlength+’"
这句话产生图形的宽度，这基于用户提供的数据。每个长度是输入值的百分比，然后乘以条形长度的基本长度。
2.
使用图形信息建立原始数据的图形。只给复杂图形的名称赋予一定的值（值可以是绝对值或百分比），剩下的留给脚本就行了。
图形信息允许你在同一个网页上生成不止一个图形文件，而这只需要多次的调用关键的函数。
Example:
Example 1 (using absolute values)
What is your favorite news site?
CNN
28%

MSNBC
36%

ABC News
11%

BBC News
25%
Total participants: 211
Example 2 (using percentage values)
What is your favorite news site?
CNN
28%

MSNBC
36%

ABC News
11%

BBC News
25%
因为EXAMPLE 1是用绝对值来创建的，脚本也在最后显示了总值。
指导
步骤一：下面是图形信息的两个版本。第一个要求图形值是绝对值，而第二个是相对值。
绝对方式：
What is your favorite news site?
《script language="JavaScript1.2"》
//JavaScript Graph-it! (Absolute)- by javascriptkit.com
***隐藏网址***
//Credit must stay intact for use
var graphimage="poll.gif"
//DEFINE GRAPH VALUES
var graphx=new Array()
graphx
graphx
graphx
graphx
//YOU CAN DEFINE MULTIPLE GRAPHS, eg:
//var graphy=new Array()
function graphit(g,gwidth){
total=0
for (i=0;i《g.length;i++)
total+=parseInt(g)
output=’《table border="0" cellspacing="0" cellpadding="0"》’
for (i=0;i《g.length;i++){
calpercentage=Math.round(g*100/total)
calwidth=Math.round(gwidth*(calpercentage/100))
output+=’《tr》《td》’+g+’ 《/td》《td》《img src="’+graphimage+’" width="’+calwidth+’" height="10"》 ’+calpercentage+’%《/td》《/tr》’
}
output+=’《/table》’
document.write(output+’《br》Total participants: 《b》’+total+’《/b》’)
}
//CALL GRAPHIT FUNCTION
//graphit(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS)
graphit(graphx,200)
《/script》
《p align="center"》《font face="arial" size="-2"》This free script provided by《/font》《br》
***隐藏网址***
Kit《/a》《/font》《/p》
相对方式：
What is your favorite news site?
《script language="JavaScript1.2"》
//JavaScript Graph-it! (Percentage)- by javascriptkit.com
***隐藏网址***
//Credit must stay intact for use
var graphimageP="poll.gif"
//DEFINE GRAPH VALUES
var graphv=new Array()
graphv
graphv
graphv
graphv
//YOU CAN DEFINE MULTIPLE GRAPHS, eg:
//var graphz=new Array()
function graphitP(g,gwidth){
outputP=’《table border="0" cellspacing="0" cellpadding="0"》’
for (i=0;i《g.length;i++){
calwidthP=gwidth*(parseInt(g)/100)
outputP+=’《tr》《td》’+g+’《/td》《/tr》’
}
outputP+=’《/table》’
document.write(outputP)
}
//CALL GRAPHIT FUNCTION
//graphitP(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS)
graphitP(graphv,200)
《/script》
《p align="center"》《font face="arial" size="-2"》This free script provided by《/font》《br》
***隐藏网址***
Kit《/a》《/font》《/p
以上回答你满意么？

怎么用javascript语言编程一个爱心形状呢

html5确实很方便

《!doctype html》
《html》
《head》
《meta charset="UTF-8"》
《title》Untitled Document《/title》
《/head》
《body》
《p style="text-align:center"》《canvas id="canvas1" height="600" width="600"》《/canvas》《/p》
《script type="text/javascript"》
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.translate(300,300); //sets center in the middle of the picture
drawHeart();
function drawHeart() {
   ctx.beginPath();
   ctx.moveTo(0,-100);
   ctx.bezierCurveTo(120,-300, 300,-100, 200,50);
   ctx.lineTo(0,250);
   ctx.lineTo(-200,50);
   ctx.bezierCurveTo(-300,-100, -120,-300, 0,-100);
   ctx.closePath();
   ctx.fillStyle="#ff0000";
   ctx.fill();
}
《/script》
《/body》
《/html》