您的位置：首页 > 其它

thml5 学习笔记（10）

2015-08-12 21:01 459 查看

canvas绘制渐变图形：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(id){
var canvas = document.getElementById(id);
if(canvas == null){
return false;
}
var context = canvas.getContext("2d");
context.fillStyle = "#eeeeef";
context.fillRect(0, 0,300,400);
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.fillStyle = "rgb(100,255,100)";
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI/15*11;
context.moveTo(dx,dy);
var gr = context.createLinearGradient(0,0,300,0);
gr.addColorStop(0,"rgba(0,0,255,0.5");
gr.addColorStop(1,"rgba(255,0,0,0.5");
for(var i=0; i<30; i++){
context.fillStyle = gr;
var x = Math.sin(i*dig);
var y = Math.cos(i*dig);
context.bezierCurveTo(dx+x*s, dy+y*s-100,dx+x*s+100, dy+y*s,dx+x*s,dy+y*s);
}
context.closePath();
context.fill();
context.stroke();
}
</script>
</head>
<body onload="draw('canvas')">
<!--bezierCurveTo(cp1x, cp1y, cp2x,cp2y,x,y)
控制点：cp1x,cp1y，第一个控制点的坐标值， cp2x,cp2y，第二个控制点的坐标值：
-->
<canvas id="canvas"  width="300" height="400"></canvas>

</body>
</html>

canvas绘制径向渐变图形；

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(id){
var canvas = document.getElementById(id);
if(canvas == null){
return false;
}
var context = canvas.getContext("2d");
//context.createRadialGradient中的六个参数：分别是起始点的圆心位置和半径，结束点的圆心位置和半径
var gl = context.createRadialGradient(250,250,0,250,250,300);
gl.addColorStop(0.1, "rgb(255,255,0)");
gl.addColorStop(0.3, "rgb(255,0,255)");
gl.addColorStop(1, "rgb(0,255,255)");

context.fillStyle = gl;
context.fillRect(0,0,500,500);

}
</script>
</head>
<body onload="draw('canvas')">

<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
绘制变形图形：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function draw(id){
if(canvas == null){
return false;
}
var context = canvas.getContext("2d");
context.fillStyle = "#eeeeef";
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>
</head>
<body onload="draw('canvas')">

<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航