189 8069 5689

javascript作画,javascript教程网

有哪些方法可以用 javascript 在屏幕上画出一个正方形

简单回答一下吧。

创新互联公司是一家网站设计公司,集创意、互联网应用、软件技术为一体的创意网站建设服务商,主营产品:成都响应式网站建设公司成都品牌网站建设成都全网营销。我们专注企业品牌在网站中的整体树立,网络互动的体验,以及在手机等移动端的优质呈现。网站设计、做网站、移动互联产品、网络运营、VI设计、云产品.运维为核心业务。为用户提供一站式解决方案,我们深知市场的竞争激烈,认真对待每位客户,为客户提供赏析悦目的作品,网站的价值服务。

Blockly是Google开源出来的一个图形化编程框架,它的出现使得拖拖拽拽就能够把大部分的编程逻辑描述出来,这合适非程序员和小孩。Blockly作为一个框架只提供了基本的封装,而大部分的函数(功能)得根据具体的情况再进行封装,如你说到的绘制一个矩形的功能也是需要根据具体情况来封装来,再比如我之前用到的Espruino Web IDE就是封装了很多单片机硬件操作功能(我也是通过它认识的Blockly,所以提一下)。

回到Blockly画一个正方形,这里有一个Blockly的在线小游戏Blockly Games : Turtle Graphics,不知道奥玩的是否是这个游戏,这个游戏的第一关就是用Blockly代码画一个正方形。

打开游戏界面之后就是下图了,中间的Turle和Loops是功能模块选择,从中选择一个循环设置为循环4次、再选择一个直行操作和一个拐弯操作,做出如下图所示的组合,点击左边的Run Programe执行游戏:

图片描述

如果正常的话你可以看到左边的游戏界面上画出了一个正方形,同时在右边可以看到你的所有Blockly生成的js代码(没错就是四行),

图片描述

当然,除了用循环的方式来做你也可以老老实实的直走、右转90度、直走、右转90度、直走、右转90度、直走来完成第一关(可能大部分非程序员就是这种逻辑了)。

在刚刚生成的Blockly代码里面,"直走moveForward"和"右转turnRight"都是这个游戏对Blockly进行的封装。我也只玩了第一关,说句实在的,这种方式对程序员来讲还是太low了,突然间觉得比奥厉害很多了有没有。

转载,仅供参考。

已知两个点,如何用javascript在网页上画一条直线?

可以呀,只要他们俩之间画很多的小点就是一条直线啦,哈哈,用循环就可以啦,至于点的位置嘛,只要有初中的数学就可以搞定,我就不说了,颜色和粗度只要设置小点的style就可以啦,至于小点嘛可不能用英文里的句号(.),哪样会产生编差,因为他不在正中,而在底部,可以用(●),虽然大了点,但可以变小,也可以自已成为画一个图,哈哈,,,,,,,,,

javaScript如何画类图和包图?

首先JavaScript没有类, 更没有包的概念. 只有对象, 一切都是对象.

然而JavaScript有面向对象的写法, 不过实际上是不支持面向对象的, 只是为了代码可读性.

可是话说回来, 类的概念是人定的, 所以Javascript也是可以画类图的.

怎样在javascript中画出三角形?

for (var i = 0; i  3; i++)

{

for(var j = 0; j  2 * (i + 1) - 1; j++)

{

document.write("*");   

}

document.write("br /");

}

javascript如何画图形?

这个问题你用baidu搜索一下,有很多的教程。。

;cl=3

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;igraphtext.length;i++)

document.write (graphtext[i]+': img src="poll.gif" width="'+graphvalue[i]/100*barlength+'" height="15"br')

/script

Jill:

Bob:

Tony

代码的关键之处在于:width="'+graphvalue[i]/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

//Visit JavaScript Kit () for script

//Credit must stay intact for use

var graphimage="poll.gif"

//DEFINE GRAPH VALUES [Item name, absolute value]

var graphx=new Array()

graphx[0]=["CNN",60]

graphx[1]=["MSNBC",75]

graphx[2]=["ABC News",24]

graphx[3]=["BBC News",52]

//YOU CAN DEFINE MULTIPLE GRAPHS, eg:

//var graphy=new Array()

function graphit(g,gwidth){

total=0

for (i=0;ig.length;i++)

total+=parseInt(g[i][1])

output='table border="0" cellspacing="0" cellpadding="0"'

for (i=0;ig.length;i++){

calpercentage=Math.round(g[i][1]*100/total)

calwidth=Math.round(gwidth*(calpercentage/100))

output+='trtd'+g[i][0]+' /tdtdimg src="'+graphimage+'" width="'+calwidth+'" height="10" '+calpercentage+'%/td/tr'

}

output+='/table'

document.write(output+'brTotal 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/fontbr

font face="arial, helvetica" size="-2"a href=""JavaScript

Kit/a/font/p

相对方式:

What is your favorite news site?

script language="JavaScript1.2"

//JavaScript Graph-it! (Percentage)- by javascriptkit.com

//Visit JavaScript Kit () for script

//Credit must stay intact for use

var graphimageP="poll.gif"

//DEFINE GRAPH VALUES [Item name, Percentage value]

var graphv=new Array()

graphv[0]=["CNN","28%"]

graphv[1]=["MSNBC","36%"]

graphv[2]=["ABC News","11%"]

graphv[3]=["BBC News","25%"]

//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;ig.length;i++){

calwidthP=gwidth*(parseInt(g[i][1])/100)

outputP+='trtd'+g[i][0]+' /tdtdimg src="'+graphimageP+'" width="'+calwidthP+'" height="10" '+g[i][1]+'/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/fontbr

font face="arial, helvetica" size="-2"a href=""JavaScript

Kit/a/font/p

以上回答你满意么?

Javascript如何在网页上实现画图功能

方法只有一个:

通过canvas的方式,在画布上画图

步骤:

1、定义一个canvas

2、获取canvas,然后通过画图

示例:canvas 元素来显示一个红色的矩形

canvas id="myCanvas"/canvas//定义一个canvas

script type="text/javascript"

var canvas=document.getElementById('myCanvas');//获取canvas

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000'; //图形填充色

ctx.fillRect(0,0,80,100); //绘制一个红色矩形

/script


文章题目:javascript作画,javascript教程网
转载来于:http://cdxtjz.cn/article/phicod.html

其他资讯