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>