html页面画一个矩形,使用HTML5 canvas绘制一个矩形的方法

使用HTML5 canvas绘制一个矩形的方法

发布时间：2020-08-29 11:23:12

来源：亿速云

阅读：102

作者：小新

这篇文章将为大家详细讲解有关使用HTML5 canvas绘制一个矩形的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

使用HTML5 canvas绘制一个矩形，我们需要用到Canvas上下文的rect()方法。

我们来看一个具体的例子

代码如下

function draw() {

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

if ( ! canvas || ! canvas.getContext ) {

return false;

}

var cx = 360;

var cy = 400;

var radius = 36;

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

context.beginPath();

context.rect(240, 80, 160, 80);

context.fillStyle = 'peachpuff