使用HTML5画布绘制正方形

最新推荐文章于 2024-08-12 13:18:32 发布

原创最新推荐文章于 2024-08-12 13:18:32 发布 · 4.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #画布 #绘制正方形 #canvas

html5 专栏收录该内容

2 篇文章

订阅专栏

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

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

<!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