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


本文摘自PHP中文网,作者yulia,侵删。

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

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

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

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

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

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

完整代码如下:

1

2

3

4

5

6

7

8

9

<body>

  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>

</body>

<script type="text/javascript"

  var c=document.getElementById("myCanvas");

  var ctx=c.getContext("2d");

  ctx.fillStyle="#FF0000";

  ctx.fillRect(25,10,150,80);

</script>

效果图:

图片1.jpg

阅读剩余部分

相关阅读 >>

HTML5之pushstate和popstate操作history无刷新改变当前url的详细介绍

详细介绍h5弹性盒布局的使用(父容器属性)

HTML5中audio支持音频格式的解决方法

h5正常文本框提示语的实现方法

HTML5嵌入音频和视频的方法

websocket+mse――HTML5 直播技术解析

标记语言HTML5的特点是什么

分享一个简单的HTML5 视频嵌入实例代码

HTML5中你不知道的5个新功能

canvas中线段的端点与连接点详解

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...