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);
413HTML5Canvas
创建线性渐变时 context.createLinearGradient(x,y,x1,y1) 括号内的参数含义如下:
尝试一下 »
412HTML5Canvas
制作径向渐变时 context.createRadialGradient(x , y , r , x1 , y1 , r1) 括号内参数含义如下:
(x, y, r) (x1,y1,r1)分别可以代表一个圆形的特征, 个人感觉通常情况下(x,y) 和 (x1,y1)简单地相同即可(即同心圆), 这样做出来的径向渐变已经十分美观,符合大众审美观。
尝试一下 »
411HTML5Canvas
在画圆的时候,使用下面的方法
画布的左上角坐标为0,0
注意:Math.PI表示180°,画圆的方向是顺时针
尝试一下 »410HTML颜色
相对于使用rgb(255,255,0),使用rgba(255,255,0,0.5)可以实现设置颜色透明度的功能,这里的0.5表示透明度,范围0~1。
尝试一下 »
409HTML表单
表单中的单选按钮可以设置以下几个属性:value、name、checked
注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“country”,这样同一组的单选按钮才可以起到单选的作用。