<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function draw2D(){
var canvas=document.getElementById("canvas-fram");
if(canvas==undefined){
return ;
}
canvas.width=1000; //设置画布的宽
canvas.height=1000; //设置画布的高
var context=canvas.getContext("2d");
var g1 = context.createLinearGradient(0, 0, 0, 300);//创建一个渐变对象,坐标开始为0,0,终点是0,300,说明渐变是从0,0到0,300的
g1.addColorStop(0, 'rgb(255,0,0)'); //添加一个渐变颜色,设定的颜色离渐变结束点的偏移量(0~1)
g1.addColorStop(0.5, 'rgb(0,255,0)'); //绿
g1.addColorStop(1, 'rgb(0,0,255)'); //蓝
context.fillStyle = g1; //gl在显存中已经生成了渐变对象,然后把该颜色填充到fillStyle中
context.fillRect(0, 0, 300, 300); //创建一个正方形
}
</script>
</head>
<body οnlοad="draw2D()">
<canvas id="canvas-fram"></canvas>
</body>
</html>
运行效果图: