var b = a.getContext(“2d”);
var grd = b.createRadialGradient(75,50,5,90,60,100);//径向渐变,
context.createLinearGradient(x0,y0,x1,y1);
参数值
参数 描述
x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标
context.createLinearGradient(x0,y0,x1,y1);
同上;
addColorStop(stop,color);stop 介于 0.0 与 1.0 之间的值,//表示渐变中开始与结束之间的位置。//color 在结束位置显示的 CSS 颜色值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#mycanvas{
border: 1px solid black;
margin: 0px;
padding: 0px;
}
</style>
</head>
<script type="text/javascript">
function a()
{
var a = document.getElementById("mycanvas");
var b = a.getContext("2d");
var grd = b.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"black");
grd.addColorStop(0.5,"red");
grd.addColorStop(1,"white");
b.fillStyle=grd;
b.fillRect(10,10,150,100);
}
function a1()
{
var a = document.getElementById("mycanvas");
var b = a.getContext("2d");
var grd = b.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");//addColorStop(stop,color);stop 介于 0.0 与 1.0 之间的值,//
//表示渐变中开始与结束之间的位置。//color 在结束位置显示的 CSS 颜色值
grd.addColorStop(0.5,"red");
grd.addColorStop(1,"white");
b.fillStyle=grd;
b.fillRect(10,10,150,100);
}
</script>
<body onload="a()">
<canvas height="800" width="1000" id="mycanvas">
</canvas>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#mycanvas{
border: 1px solid black;
margin: 0px;
padding: 0px;
}
</style>
</head>
<script type="text/javascript">
function a()
{
var a = document.getElementById("mycanvas");
var b = a.getContext("2d");
b.fillStyle="#000000";
b.fillRect(10,10,150,100);
b.scale(2,2);
b.fillStyle="chartreuse";
b.fillRect(10,10,150,100);
}
function a1()
{
var a = document.getElementById("mycanvas");
var b = a.getContext("2d");
b.fillStyle="#000000";
b.fillRect(10,10,150,100);
b.rotate(20*Math.PI/180);
b.fillStyle="chartreuse";
b.fillRect(10,10,150,100);
}
</script>
<body onload="a()">
<canvas height="800" width="1000" id="mycanvas">
</canvas>
</body>
</html>
scale(sx)
或
scale(sx, sy)
值节
sx
,表示缩放向量的横坐标。
sy
,表示缩放向量的纵坐标。如果未设置,则他的默认值被设置为 sx。 从而使得元素在保持原有形状下均等缩放
rotate(angle)
旋转的角度;顺时针;