首页 > web前端 > html/css/css3 > html5 canvas绘图之context.strokeRect 边框矩形实例
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
06-15

html5 canvas绘图之context.strokeRect 边框矩形实例

canvas绘制矩形需要要用到两个函数context.fillRect和context.fillStyle

context.strokeRect(x, y, width, height)

画一个带边框的矩形,只画线不填充,x, y是矩形左上坐标,width, height是矩形的宽度和高度。

context.strokeStyle(“”)
边框颜色(颜色值可直接用颜色名称:”red” “green” “blue”, 十六进制颜色值: “#EEEEFF”, rgb(1-255,1-255,1-255), rgba(1-255,1-255,1-255,透明度))

<canvas id="demo-canvas" width="800" height="800">
您的浏览器不支持<canvas>,建议升级。
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("demo-canvas");
if (canvas.getContext){
   var context = canvas.getContext('2d');
   context.strokeStyle= "rgb(200,0,0)";
   context.strokeRect(10, 10, 55, 50);
}
<script>

效果图

html5 canvas绘图之strokeRect 边框矩形实例

进入html5 canvas绘图详细教程

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

留下一个回复

你的email不会被公开。

*