如何用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

阅读剩余部分

相关阅读 >>

详解h5非常重要的28个新特性,新技巧和新技术

HTML5 高级教程之web storage

HTML5 video 上传预览图片视频,设置、预览视频某秒的海报帧

HTML5怎么实现拖拽

使用HTML5实现树叶飘落的效果

服务器推送事件的详细介绍

HTML5如何制作一份邀请函?制作邀请函的方法(代码示例)

借助todataurl实现将HTML5 canvas的内容保存为图片

【h5开发工具】2017最好用的10种HTML5应用开发工具推荐

页面性能优化的方法总结

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




打赏

取消

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

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

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

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

评论

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

    正在狠努力加载,请稍候...