怎样使用canvas绘制一个矩形

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎样使用canvas绘制一个矩形相关的知识,希望对你有一定的参考价值。

1、首先需要新建文件并创建画布。

2、接下来开始定义函数获取画布。

3、然后可以获取上下文。、

4、接着需要设置填充矩形的颜色。

5、接下来开始设置边框颜色和边框宽度。

6、最后开始绘制填充矩形和边框矩形。

7、最后输出完成图,可以看到绘制一个矩形。

参考技术A

1、首先需要建立一个HTML5的网页:进入DW后,选择:文件-->新建,在弹出的对话框中选择文件类型为Html5

2、选择“创建”后,即会形成一个空白网页,选择“文件”--"保存",起名为:juxing

3、将视图切换为”代码“视图,并将标题改为“画出矩形”,标题也可以依据自己的喜好进行设定,并不影响网页的运行。

4、Html是标记型语言,各种功能都需要在对应的标签里面才可以,故先需要添加标签。输入<c,就会看到提示列表里出现所需要的标签canvas,按下回车键,即可完成输入。

5、每次操作都会有提示列表,只需选择所需的项目,按下回车即可,只有引号内的”mycanvas“是需要完整输入的,命令为:<canvas id="mycanvas" width="600" height="400"></canvas>

6、Canvas标记不能直接画图,需配合JavaScript语言,先写出对应的程序标记。Html语言中的标记都是成对出现的,为了避免错误,先将标记的起始、标记的结束写好

7、写好前后标记后,即可在标记中使用JavaScript语言,调用Canvas标记,画出所需矩形

8、将变量 ctxt赋值为利用刚定义的“canvas”返回的二维绘图环境对象,使用这个对象就可以绘图了,使用fillStyle方法设置颜色。

ctx.fillRect(50,50,400,200)指填充的起始位置设置为(50,50),矩形宽度为400,高度为200

9、选择在浏览器中浏览后,即可看到所需矩形。

参考技术B <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>

<body>
<canvas id="demoCanvas" width="500" height="500">
 <p>请使用支持HTML5的浏览器查看本实例</p>
</canvas>
<!---下面将演示一种绘制矩形的demo--->
<script type="text/javascript">
 //第一步:获取canvas元素
 var canvasDom = document.getElementById("demoCanvas");
 //第二步:获取上下文
 var context = canvasDom.getContext('2d');
 //第三步:指定绘制线样式、颜色
 context.strokeStyle = "red";
 //第四步:绘制矩形,只有线。内容是空的
 context.strokeRect(10, 10, 190, 100);
 //以下演示填充矩形。
 context.fillStyle = "blue";
 context.fillRect(110,110,100,100);
</script>
</body>

</html>

本回答被提问者采纳
参考技术C 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();

以上是关于怎样使用canvas绘制一个矩形的主要内容,如果未能解决你的问题,请参考以下文章

canvas中怎么绘制一个扇形?四分之一圆.

用canvas绘制数字645?

如何用tablea7绘制canvas

Android 里canvas 绘制了两个矩形,交叉位置颜色重叠

canvas(四) 绘制文字

canvas绘制线条怎么改变线条长度