您现在的位置是:网站首页>前端技术>HTML5教程HTML5教程
html5 实现如何将两个矩形相互叠加
神夜2020-10-30 09:10:14【HTML5教程】3791人已围观文章来源:PHP中文网
简介本篇介绍html5 实现如何将两个矩形相互叠加,注意要使用支持html5的浏览器
本篇介绍html5 实现如何将两个矩形相互叠加,注意要使用支持html5的浏览器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Canvas Primer - Example: Drawing shadows</title> <script type="text/javascript"> window.addEventListener('load', function () { //得到canvas,并检测是否支持canvas var elem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; } // 得到可以画图的上下文context var context = elem.getContext('2d'); if (!context) { return; } // 分别设置阴影的偏移坐标,阴影的虚化程度,阴影的颜色,图形的填充颜色,以及绘制图形。 context.shadowOffsetX = 10; context.shadowOffsetY = 10; context.shadowBlur = 4; context.shadowColor = 'red'; context.fillStyle = '#00f'; context.fillRect(20, 20, 150, 100); }, false); </script> </head> <body> <p><canvas id="myCanvas" width="300" height="150">Your browser does not have support for Canvas. </canvas></p> </body> </html>
以上就是html5 实现如何将两个矩形相互叠加的详细内容,更多请关注php中文网其它相关文章!
本栏推荐
猜你喜欢
站点信息
- 建站时间:2017-10-24
- 网站程序:Hsycms 3.0
- 文章统计:511条
- 微信公众号:扫描二维码,关注我们