HTML5之Canvas画正方形

最新推荐文章于 2024-04-15 10:32:48 发布

翱翔天地

最新推荐文章于 2024-04-15 10:32:48 发布

阅读量1w

点赞数 1

分类专栏： HTML5 文章标签： html5 canvas

本文链接：https://blog.csdn.net/you23hai45/article/details/44262719

版权

本文介绍HTML5的Canvas元素用于绘制正方形的方法。通过获取Canvas元素，取得2D渲染上下文，设置填充样式、边框样式、线宽和颜色，最后使用fillRect和strokeRect方法绘制填充和边框的正方形。

摘要由CSDN通过智能技术生成

HTML5之Canvas画正方形

1、设计源码

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>HTML5之Canvas画正方形</title>
<script type="text/javascript">
    function drawFour(id)
	{
		//获取canvas元素
		var canvas = document.getElementById("canvas");
		if(canvas == null)
		   return false;
		//获取上下文
		var context = canvas.getContext('2d');
		//设定填充图形的样式
		context.fillStyle = "#EEEEFF";
		//绘制图形
		context.fillRect(0,0,800,800);
		context.fillStyle = "yellow";
		//设定图形边框的样式
		context.strokeStyle = "blue";
		//指定线宽
		context.lineWidth = 150;
		context.