从零开始-Canvas
1、颜色、样式和阴影
属性
a、fillStyle(设置或返回用于填充绘画的颜色、渐变或模式)
语法：context.fillStyle = color(颜色值) | gradient(渐变对象，线性或者放射性) | pattern(填充绘图的pattern对象) ;
定义一个用蓝色填充的矩形
<body>
//定义一个画布 <canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas> <script> //DOM获取到这块画布 var c=document.getElementById("myCanvas"); //然后，创建 context 对象 //getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 var ctx=c.getContext("2d"); //填充画布的颜色 ctx.fillStyle="#0000ff"; //确定画布的位置和大小 //四个参数分别为： //画布在标签的初始x位置 //画布在标签的初始y位置 //画布的长度 /画布的宽度 ctx.fillRect(20,20,150,100); </script></body>
结果显示：
定义从上到下的渐变，作为矩形的填充样式
<body> <canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); //创建线性渐变 //四个参数的含义： //渐变开始的点的x坐标 //渐变开始的点的y坐标
关键字：
