怎么用html5画矩形

这篇文章主要讲解了“怎么用html5画矩形”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用html5画矩形”吧!

代码如下:

<!DOCTYPEhtml><head>
<metacharset=utf-8>
<title>HTML5画矩形</title>
<scriptsrc="<ahref="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script">http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script</a>>
</head>
<script>
$(document).ready(function(){
varc=document.getElementById("drawbox");
vardraw=c.getContext("2d");//获取2d内容的引用,调用绘图API
draw.fillStyle="#ff0000";//方式一指定填充颜色
draw.fillRect(0,0,300,100);//坐标和长宽
draw.fillStyle="rgba(0,0,255,0.5)";//方式二rgb+透明度
draw.fillRect(400,0,100,100);//坐标和长宽
})
</script>
</body>
<canvasid="drawbox"width="500"height="500"></canvas>
</body>
</html>

效果图怎么用html5画矩形

感谢各位的阅读,以上就是“怎么用html5画矩形”的内容了,经过本文的学习后,相信大家对怎么用html5画矩形这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是恰卡编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

发布于 2021-07-24 22:37:33
收藏
分享
海报
0 条评论
182
上一篇:html5怎么实现Photoshop渐变色效果 下一篇:Java中怎么合并、拆分PDF文档
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码