您的位置:首页 > 其它

canvas--改变颜色

2016-01-15 18:46 197 查看


代码:

<canvas id="c1" width="400" height="400" style="background-color:red">
</canvas>

<script type="text/javascript">
//获取画布元素
var canvas=document.getElementById("c1");
//绘制环境(我称为“画笔”)
var cxt=canvas.getContext("2d");

//改变填充的颜色
cxt.fillStyle="#ffff00";
//画一个实体方块---fillrect(x,y,w,h);
cxt.fillRect(50,50,100,100);

//改变边框颜色
cxt.strokeStyle="blue";
//改变边框宽度
cxt.lineWidth=5;
//画出一个空心方块---strokeRect(x,y,w,h);
//cxt.strokeRect(200,200,100,100);
cxt.strokeRect(200.5,200.5,100,100);
</script>


【新知识点】:

  1、fillStyle //填充的颜色

  2、strokeStyle //边框的颜色

  3、lineWidth //线宽度

【注意】:(不然将不会运行)

  属性,方法都用的骆驼命名法,首字母为小写,第二个单词首字母大写;如userName。因为看上去像驼峰,因此而得名。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: