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

html5 canvas绘图之context.fillStyle,context.strokeStyle颜色实例

html5 canvas绘图之fillStyle,strokeStyle颜色实例

  • context.fillStyle(“”)
    填充颜色(颜色值可直接用颜色名称:”red” “green” “blue”, 十六进制颜色值: “#EEEEFF”, rgb(1-255,1-255,1-255), rgba(1-255,1-255,1-255,透明度))。
  • context.strokeStyle(“”)
    边框颜色(颜色同上)。
<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);

   context.fillStyle = "rgb(200,0,0)";
   context.fillRect (100, 10, 55, 50);//填充颜色
}
<script>

效果图

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

进入html5 canvas绘图详细教程

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

留下一个回复

你的email不会被公开。

*