HTML5画布绘制矩形和圆的实例代码。

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。









获取上下文和呈现设置>填充框架绘图样式>
创建一个图形路径以关闭路径图> > >

绘制矩形：
画圆：



绘制矩形
函数绘图（）{
VaR的画布document.getelementbyid（返回'）； / /把画布元素
如果（画布= NULL）
返回false；
VaR上下文= canvas.getcontext（二维的）； / /获得语境
背景。fillStyle =# eeeff '； / /填充颜色
context.fillrect（00400300）； / /填充矩形（长方形1）
背景。fillStyle＝'；
背景。strokeStyle = '蓝色'； / /边框颜色
上下文。线宽= 1；边框宽度
context.fillrect（5050100100）； / /填充矩形（矩形2）
context.strokerect（5050100100）； / /并条机

}
绘制一个圆
功能drawarc（）{
无功canvas2 = document.getelementbyid（'yuan '）； / /把画布元素
如果（canvas2 = = null）
如果（canvas2 = = null）
返回false；
var context2 = canvas2.getcontext（二维的）； / /获得语境
范围内。fillStyle =# eeeee F；
（00400300）context2.fillrect；
var = 0；
对于（var i = 0；i < 10；i + +）{
（范围内。调用）； / /创建一个路径
context2.arc（我25，我25，我方、数学。PI * 2，true）； / /创建一个圆形路径
（范围内。closepath） / /关闭路径；
范围内。fillStyle = 'rgba（255,0,0, 0.25 '）； / /颜色设置
（范围内。填写）； / /填充图案
}
}







以上是HTML5画布绘制矩形和圆的示例代码的全部内容，供大家参考。我希望你能支持脚步。