您的位置：首页 > Web前端 > HTML5

HTML5学习笔记14-Canvas绘制渐变图形与绘制变形图形

2017-01-17 16:38 726 查看

1、线性渐变

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
</head>
<body onload="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 onload="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 onload="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 新手 canvas 图形

相关文章推荐

新的分享

章节导航