创建线性渐变时 context.createLinearGradient(x,y,x1,y1) 括号内的参数含义如下：

• x: 起始位置的x坐标
• y: 起始位置的y坐标
• x1: 渐变终点位置的x坐标
• y1: 渐变终点位置的y坐标

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); // 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"green");
grd.addColorStop(1,"white"); // 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

尝试一下 »

制作径向渐变时 context.createRadialGradient(x , y , r , x1 , y1 , r1) 括号内参数含义如下:

• x: 渐变的开始圆的 x 坐标
• y: 渐变的开始圆的 y 坐标
• r: 开始圆的半径
• x1: 渐变的结束圆的 x 坐标
• y1: 渐变的结束圆的 y 坐标
• r1: 结束圆的半径

(x, y, r) (x1,y1,r1)分别可以代表一个圆形的特征, 个人感觉通常情况下(x,y) 和 (x1,y1)简单地相同即可(即同心圆), 这样做出来的径向渐变已经十分美观,符合大众审美观。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建径向渐变
var grd=ctx.createRadialGradient(150,150,5,150,150,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(50,50,250,250);

尝试一下 »

在画圆的时候，使用下面的方法

arc(x,y,r,start,stop)

画布的左上角坐标为0,0

• x：圆心在x轴上的坐标
• y：圆心在y轴上的坐标
• r：半径长度
• start：起始角度，以弧度表示，圆心平行的右端为0度
• stop：结束角度，以弧度表示

注意：Math.PI表示180°，画圆的方向是顺时针

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(250,250,250,0,Math.PI);
ctx.stroke();
</script>

相对于使用rgb(255,255,0)，使用rgba(255,255,0,0.5)可以实现设置颜色透明度的功能，这里的0.5表示透明度，范围0~1。

<p style="background-color:rgb(255,255,0)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.25)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.5)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.75)">
通过 rbg 值设置背景颜色
</p>

表单中的单选按钮可以设置以下几个属性：value、name、checked

• value：提交数据到服务器的值（后台程序PHP使用）
• name：为控件命名，以备后台程序 ASP、PHP 使用
• checked：当设置 checked="checked" 时，该选项被默认选中

<form>
<p>你生活在哪个国家？</p>
<input type="radio" name="country" value="China" checked="checked">中国<br />
<input type="radio" name="country" value="the USA">美国
</form>

注意：同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“country”，这样同一组的单选按钮才可以起到单选的作用。