html5矩形,div画矩形

html5 canvas怎么画两个矩形

var canvas=document.getElementById('canvas');

var ctx =getContext('2d');

ctx.beginPath();

ctx.lineWidth=1;

ctx.strokeStyle="#000";

ctx.rect(0,0,10,20);

ctx.stroke();

ctx.closePath();

//用closepath结束绘画，否则可能出现黏连；

ctx.beginPath();

ctx.lineWidth=1;

ctx.strokeStyle="#f00";

ctx.rect(50,0,10,20);

ctx.stroke();

ctx.closePath();

相关问答

Q1: HTML5，怎样才能创建一个没有边缘的矩形区域？

使用下面的CSS

html,body {

    padding:0;

    margin:0;

}

Q2: html5中画布里 创建矩形方法 rect() 具体怎么用

xy是你起始点的坐标！后面两个参数是你矩形的宽度！至于为什么！xy坐标可以确定你图像想显示在哪！就是确定矩形位置！宽高可以确定你矩形的大小

Q3: html5矩形绘图

1、若是已存在的图片，根据图片大小，选择一个图片的大小作为标准值:分别右键点击各图型--设置自选图形格式--大小--把锁定纵横比去掉(假如需要保持则不去掉)--高设为统一的值(需要大小完全相同的话，宽也设为统一的值--锁定纵横比去掉的前提下)2、若是新建长方形，可以建好一个，设置好长宽和位置，复制几个一样的出来。3、分别全部设置完。还是在“设置自选图形格式”，把版式改为“浮于文字上方”。这个比较适合移动图形，其他方式也可以试试。4、Word里面要想设置的间距完全相同，有一定难度，但基本相同还是可以的--画一条横线，长短在“设置自选图形格式”里改为你想要的间距，以它为标尺。把线移动到第一个图形的右边缘，再去移第二个图形，以此类推。移动时按住ALT键拖动，可以微调。--若想完全精确，也有办法，在“设置自选图形格式”里面，“版式”--“高级选项”，这里有位置选项，可以设置离边距多远之类的，需要计算一下。基本能达到你的要求了。

Q4: 如何使用html5中的canvas标签，画一个圆及一个矩形

Cavas的英文解释是画布，使用这个Html5的Canvas标签可以创建画布，结合JavaScript可以画出很多图形，我们先以画一个蓝色矩形为例，说明一下这个标签的使用方法，

首先需要建立一个HTML5的网页，方法是：

进入DW后，选择：文件--新建

在弹出的对话框中选择文件类型为Html5

选择“创建”后，即会形成一个空白网页，选择“文件”--"保存“

起名为：juxing

这个名字可以依据自己的喜好起，但最好名字与网页内容相关，以后好找，另外一个需要注意的是，最好不用汉字。

我们将视图切换为”代码“视图

并将标题改为”画出矩形“

标题也可以依据自己的喜好进行设定，并不影响网页的运行。

Html是标记型语言，各种功能都需要在对应的标签里面才可以，所以我们首先需要添加标签。

我们只需输入c，就会看到提示列表里出现我们所需要的标签canvas，按下回车键，即可完成输入。

之后，我们每一次按下空格、或输入相关字母，都会有提示列表，我们只需选择所需的项目，按下回车即可，并不需要完整输入字串，可以避免输入时的拼写错误。在本例中，只有引号内的”mycanvas“是需要完整输入的，其他部分的关键字都可以通过提示列表进行输入。

命令为：canvas id="mycanvas" width="600" height="400"/canvas

只有Canvas标记是不能直接画出图来的，需要配合JavaScript语言，首先需要写出对应的程序标记。

Html语言中的标记都是成对出现的，我们为了避免错误，可以先将标记的起始、标记的结束写好

写好前后标记后，我们就可以在标记中使用JavaScript语言，调用Canvas标记，画出我们所需要图形了，方法是：

var canvas=document.getElementById('mycavas');

将变量canvas，赋值为我们之前在html中定义的画布”mycanvas，以方便JavaScript调用

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

将变量 ctxt赋值为利用刚定义的“canvas”返回的二维绘图环境对象，使用这个对象就可以绘图了

使用fillStyle方法设置颜色，是十六进制表示的三原色分量范围是从“#000000”至“FFFFFF”

ctx.fillStyle='#0066cc';

我们将颜色设置为一种蓝色，这个颜色也可以随自己喜好 更改。

ctx.fillRect(50,50,400,200);

填充的起始位置设置为（50，50），矩形宽度为400，高度为200

选择在浏览器中浏览后，即可看到我们所需要的矩形

Q5: HTML5 Canvas中绘制矩形实例

让我们来看一下Canvas内置的简单几何图形

—

矩形的绘制。在Canvas中，绘制矩形有三种方法：填充(fillRect)、描边(StrokeRect)以及清除(clearRect)。当然，我们也可以使用“路径”来描绘包括矩形在内的所有图形。

以下是上述三种方法的API:

1.fillRect(x,y,width,height)。绘制一个从(x,y)开始，宽度为width，高度为height的实心矩形。

2.strokeRect(x,y,width,height)。绘制一个从(x,y)开始，宽度为width，高度为height的矩形框。该矩形框会根据当前设置的strokeStyle、lineWidth、lineJoin和miterLimit属性的不同而渲染成不同的样式。

3.clearRect(x,y,width,height)。清除从(x,y)开始，宽度为width，高度为height的矩形区域，使之完全透明。

在调用上述方法绘制Canvas之前，我们需要设定填充和描边的样式。设定这些样式最基本的方法是使用24位色(用16进制字符串表示)。以下是一个简单的例子：

代码如下:

context.fillStyle

=

"#000000";

context.strokeStyle

=

"#ff00ff";

在下面的例子中，填充色设定为黑色，而描边色则设定为紫色：

代码如下:

function

drawScreen()

{

context.fillStyle

=

"#000000";

context.strokeStyle

=

"#ff00ff";

context.lineWidth

=

2;

context.fillRect(10,

10,

40,

40);

context.strokeRect(0,

0,

60,

60);

context.clearRect(20,

20,

20,

20);

}

代码执行结果如下图所示：