canvas绘图

1 绘制五角星

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星绘制</title>
    <style type="text/css">
        #canvas{
            border: 1px solid #ADACB0;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500">
        你的浏览器还不支持canvas
    </canvas>
</body>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
	context.fillStyle = "#F6F152";
    context.strokeStyle = "#F5270B";
    context.beginPath();
    //设置是个顶点的坐标，根据顶点制定路径
   for (var i = 0; i < 5; i++) {
       context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+230,
                        -Math.sin((18+i*72)/180*Math.PI)*200+230);
        context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+230,
                       -Math.sin((54+i*72)/180*Math.PI)*80+230);
    }//Math.PI返回圆周率
	context.shadowBlur=10;
	context.shadowColor="blue";
    context.closePath();
    //设置边框样式以及填充颜色
    context.lineWidth="3";
    context.fill();
    context.stroke();			
</script>
</html>

2 绘制半圆

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>半圆</title>
</head>
<body>
<canvas id="demo" width="300" height="300" style="border:1px solid #ccc"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("demo");
var ctx=canvas.getContext("2d");
ctx.fillStyle="red";
ctx.strokeStyle="black";
ctx.lineWidth=5;
ctx.beginPath();
ctx.arc(150,150,130,0,Math.PI,true);
ctx.closePath();
ctx.fill();
ctx.stroke();
</script>
</body>
</html>

3 渐变文字

<!DOCTYPE html>
<html>
<head>
	<title>渐变文字</title>
	<meta charset="utf-8">
</head>
<body>
	<canvas id="demo" width="800" height="600">你的浏览器不支持canvas</canvas>
	<script type="text/javascript">
		var canvas=document.getElementById('demo');
		ctx=canvas.getContext('2d');
	     grd=ctx.createLinearGradient(0, 0, canvas.width, 0);
		grd.addColorStop('0','black');
		grd.addColorStop('0.3','green');		
		grd.addColorStop('0.6','yellow');
		grd.addColorStop('1','red');
		ctx.font = '80px yahei';  
		ctx.fillStyle= grd;
		ctx.fillText('我喜欢Web前端', 100, 100); 
	</script>
</body>
</html>

4 图文混排

<!DOCTYPE html>
<html>
<head>
	<title>图文混排</title>
	<meta charset="utf-8">
</head>
<body>
<canvas id="demo" width="1000" height="800"></canvas>
<script type="text/javascript">
	var canvas=document.getElementById("demo");
	var ctx=canvas.getContext("2d");
      ctx.fillStyle='#99f';
      ctx.fillRect(0,0,800,600);
      var image=new Image();
      image.src="1.jpg";
      image.onload=function(){
      	ctx.drawImage(image,20,20,300,560);
      }
      ctx.fillStyle = '#fff';   // 文字填充颜色  
        ctx.font = '33px 微软雅黑';  
        ctx.fillText('小朋友观看长颈鹿',390,100);   
        ctx.fillStyle = '#fff';  
        ctx.font = '66px 微软雅黑';  
        ctx.fillText('大家很开心!',390,200);  
        ctx.stroke();  
</script>
</body>
</html>

　　

posted @ 2017-12-30 20:16  勤奋的园  阅读(132)  评论(0)    收藏  举报