当前位置:  首页  >  前端开发  >  HTML

如何用HTML5中的canvas绘制渐变矩形

canvas是HTML5中新增的特性,它可以在浏览器上绘制出各种酷炫的效果,作为一个前端开发人员,你知道如何用canvas绘制图形吗?这篇文章就和大家讲讲如何用canvas绘制一个矩形及一个渐变色矩形,有一定的参考价值,感兴趣的朋友可以参考一下。
canvas是HTML5中新增的特性,它可以在浏览器上绘制出各种酷炫的效果,作为一个前端开发人员,你知道如何用canvas绘制图形吗?这篇文章就和大家讲讲如何用canvas绘制一个矩形及一个渐变色矩形,有一定的参考价值,感兴趣的朋友可以参考一下。

标签可以用来绘制图形,但是要通过JavaScript脚本来实现效果,因为标签只是一个装图形的容器,效果的实现要借助JavaScript脚本。我们可以用canvas绘制直线,圆形,矩形,字符等等。

举例1:用canvas绘制一个红色矩形,具体步骤如下:

第一步:用document.getElementById( )找到 元素

第二步:用getContext("2d")创建 context 对象

第三步:fillStyle属性可以设置矩形颜色,本例将其设置为红色;fillRect(x,y,width,height) 方法可以绘制已填色的矩形,x表示矩形左上角的X轴坐标,y表示矩形左上角的Y轴坐标,width表示矩形的宽度,height表示矩形的高度

完整代码如下:


  






















    
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有