javascript画法,javascript写法

javascript怎么画贝塞尔曲线

script type="text/javascript"

window.onload = function(){

var c = document.getElementById("myCanvas");

var content = c.getContext("2d");

//绘制二次方贝塞尔曲线

content.strokeStyle ="#FF5D43";

content.beginPath();

content.moveTo(0,200);

content.quadraticCurveTo(75,50,300,200);

content.stroke();

content.globalCompositeOperation = "source-over"; //目标图像上显示源图像

//绘制上面曲线的控制点和控制线，控制点坐标为两直线的交点(75,50)

content.strokeStyle = "#f0f";

content.beginPath();

content.moveTo(75,50);

content.lineTo(0,200);

content.moveTo(75,50);

content.lineTo(300,200);

content.stroke();

};

相关问答

Q1: 百度地图javascript api 中如何画圆弧

你可以用添加/删除覆盖物这个API试试

// 百度地图API功能

var map = new BMap.Map("allmap");

var point = new BMap.Point(116.404, 39.915);

map.centerAndZoom(point, 15);

var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点

var polyline = new BMap.Polyline([

new BMap.Point(116.399, 39.910),

new BMap.Point(116.405, 39.920),

new BMap.Point(116.425, 39.900)

], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建折线

var circle = new BMap.Circle(point,500,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆

var polygon = new BMap.Polygon([

new BMap.Point(116.387112,39.920977),

new BMap.Point(116.385243,39.913063),

new BMap.Point(116.394226,39.917988),

new BMap.Point(116.401772,39.921364),

new BMap.Point(116.41248,39.927893)

], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建多边形

var pStart = new BMap.Point(116.392214,39.918985);

var pEnd = new BMap.Point(116.41478,39.911901);

var rectangle = new BMap.Polygon([

new BMap.Point(pStart.lng,pStart.lat),

new BMap.Point(pEnd.lng,pStart.lat),

new BMap.Point(pEnd.lng,pEnd.lat),

new BMap.Point(pStart.lng,pEnd.lat)

], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建矩形

//添加覆盖物

function add_overlay(){

map.addOverlay(marker); //增加点

map.addOverlay(polyline); //增加折线

map.addOverlay(circle); //增加圆

map.addOverlay(polygon); //增加多边形

map.addOverlay(rectangle); //增加矩形

}

//清除覆盖物

function remove_overlay(){

map.clearOverlays();

}

不过这需要三角函数，关于三角函数可以去看一下《揭秘javascript的三角函数》这篇文章，那里面对三角函数讲得很清楚了。

参考资料：

《揭秘javascript的三角函数》来自：

Q2: 我用javascript画线，怎么画线呢？？？

html xmlns:v="urn:schemas-microsoft-com:vml"

HEAD

META http-equiv="Content-Type" content="text/html;Charset=gb2312"

titlevml实例/title

STYLE

v\:*{behavior:url(#default#VML);}/*声明V为VML变量*/

/STYLE

SCRIPT LANGUAGE="JavaScript"

var x,y,a,b;

function drawline(fromX,fromY,toX,toY){

var strElement= "v:Line id='line_"+fromX+"_"+fromY+"_"+toX+"_"+toY+"' from='" + fromX + "," + fromY + "' to='" + toX + "," + toY + "' strokecolor='red'/v:Line";

var newPoint = document.createElement(strElement);

document.getElementById("map").appendChild(newPoint);

}

function draw(){

if(x==undefinedb==undefined){x=window.event.x;y=window.event.y;return false;}

a=window.event.x;b=window.event.y;

drawline(x,y,a,b)

x=a;y=b;

}

function draws(){

if(x==undefinedb==undefined){return false;}

if(x==window.event.xb==window.event.y){return false;}

if(document.getElementById("TempLine")){document.getElementById("TempLine").outerHTML=""}

var strElement= "v:Line id='TempLine' from='" + x + "," + y + "' to='" + window.event.x + "," + window.event.y + "' strokecolor='red'/v:Line";

var newPoint = document.createElement(strElement);

document.getElementById("map").appendChild(newPoint);

}

/SCRIPT

/HEAD

BODY

table border="1" align="center"

tr

tddiv id="map" style="width:600px;height:500px;background-color:#cccccc;position:relative;" onmousedown="draw();" onmousemove="draws()"/div/td

/tr

/table

/body

/html

以上代码仅支持IE浏览器。

Q3: javascript用for循环怎么画等边三角形

script language="javascript"

for(i=0;i6;i++)

{

for(j=6;ji;j--)

{

document.write(" ");

}

for(n=0;n2i+1;n++)

{

document.write("*");

}

document.write("br/");

}

/script

管理员，我写的是javascript程序你为啥不通过

Q4: 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

以上回答你满意么？

Q5: 如何用javascript打印倒立等腰三角形

* * * *

* * *

* *

*

i=0 1 2 3

j=4 3 2 1

k=1 2 3 4

j=4-i

k=i+1

for(i=0,i4,i++){

for(k=0,ki+1,k++){

document.write（" "）;

}

for(j=0,j4-i,j++){

document.write（"*"）;;

}

document.write（"br"）;

}

思路：i表示行数，j表示每一行对应的列*的个数，k为每一行左侧空格数

希望能对你有所帮助