1、线性渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
</head>
<body οnlοad="draw()">
<canvas id="canvas" width="500 " height="500"></canvas>
<script>
function draw(){
var canvas=document.getElementById("canvas");
if(canvas==null){
return false;
}
var context=canvas.getContext("2d");
var gl=context.createLinearGradient(0,0,0,300);
gl.addColorStop(0,"rgb(255,255,0)");
gl.addColorStop(1,"rgb(0,255,255)");
context.fillStyle=gl;
context.fillRect(0,0,500,500);
}
</script>
</body>
</html>
2、径向渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向渐变</title>
</head>
<body οnlοad="draw()">
<canvas id="canvas" width="500" height="500"></canvas>
<script>
function draw(){
var canvas=document.getElementById("canvas");
if(canvas==null){
return false;
}
var context=canvas.getContext("2d");
var g1=context.createRadialGradient(400,0,0,400,0,400);
g1.addColorStop(0.1,"rgb(255,255,0)");
g1.addColorStop(0.3,"rgb(255,0,255)");
g1.addColorStop(1,"rgb(0,255,255)");
context.fillStyle=g1;
context.fillRect(0,0,500,500);
context.fill();
}
</script>
</body>
</html>
3、绘制变形图形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变形图形</title>
</head>
<body οnlοad="draw()">
<!--平移translate(x,y)-->
<!--缩放scale(x,y)-->
<!--旋转rotate(deg)-->
<canvas id="canvas" width="500" height="500"></canvas>
<script>
function draw(){
var canvas=document.getElementById("canvas");
if(canvas==null){
return false;
}
var context=canvas.getContext("2d");
context.fillStyle="#eeeeee";
context.fillRect(0,0,500,500);
context.translate(200,50);
context.fillStyle="rgba(255,0,0,0.25)";
for(var i=0;i<50;i++){
context.translate(25,25);
context.scale(0.95,0.95);
context.rotate(Math.PI/10);
context.fillRect(0,0,100,50);
}
}
</script>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-600282.html
