使用HTML5画布绘制正方形

最新推荐文章于 2021-05-31 11:02:25 发布

lfpwhy

最新推荐文章于 2021-05-31 11:02:25 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： html5 画布绘制正方形 canvas

本文链接：https://blog.youkuaiyun.com/whylfp/article/details/40857145

html5 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用HTML5的canvas元素结合JavaScript绘制正方形。通过`getElementById`获取canvas，然后使用`getContext("2d")`获取2D渲染上下文。接着，使用`beginPath`、`moveTo`、`lineTo`定义正方形路径，并通过`strokeStyle`设置边框颜色，最后调用`stroke`进行绘制。遵循这些步骤，你可以在网页上创建一个红色的正方形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

打开记事本写下以下代码：

<!DOCTYPE html><html><body><canvas id="myCanvas" width="300" height="150" ;></canvas>

<script>var a=document.getElementById("myCanvas"); // 使用 getElementById 将其链接到“myCanvas”

var square=a.getContext("2d");//这里通过square获取处理API的上下文contextsquare.beginPath();//开始准备绘制新的图形

square.moveTo(0,0);//开始设置起始绘制坐标位置

square.lineTo(100,0);//开始设置直线绘制横向结束的坐标位置

square.lineTo(100,100);//开始设置直线绘制纵向结束的坐标位置 square.lineTo(0,100);square.lineTo(0,0);square.strokeStyle="red";//设置直线颜色

square.stroke(); //开始正式绘制一条直线</script> </body></html>
2

另存为“htm”
3

用IE或其他浏览器打开

END