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绘图详细教程

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注