代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas的使用</title>
<!--[if lt IE 9]>
<script type="text/javascript" src="html5shiv.min.js"></script>
<link rel="stylesheet" type="text/css" href="ie-css3.htc">
<![endif]-->
<style type="text/css">
canvas{background-color:#ff0;}
</style>
</head>
<body>
<dl>
<dt>创建画布</dt>
<dd>一般都会加一个id</dd>
</dl>
<canvas id="canvas1" style="width: 40px;height: 40px; border: 1px solid #000">
</canvas>
<dl>
<dt>矩形</dt>
<dd>支持ie9+</dd>
</dl>
<canvas id="rectC"></canvas>
<script type="text/javascript">
var c=document.getElementById('rectC');
var ctx=c.getContext("2d");
ctx.fillStyle="#00f";
ctx.fillRect(0,0,140,75);
</script>
<dl>
<dt>路径</dt>
<dd>
<ol>
<li>moveTo(x,y)起点</li>
<li>lineTo(x,y)终点</li>
</ol>
</dd>
</dl>
<canvas id="lineC"></canvas>
<script type="text/javascript">
var lineC=document.getElementById('lineC');
var ctx=lineC.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.stroke();
</script>
<dl>
<dt>圆形</dt>
<dd>
<ol>
<li>arc(x,y,r,start,stop)</li>
</ol>
</dd>
</dl>
<canvas id="circleC"></canvas>
<script type="text/javascript">
var circleC=document.getElementById('circleC');
var ctx=circleC.getContext("2d");
ctx.beginPath();
ctx.arc(50,50,50,0,2*Math.PI);
ctx.stroke();
</script>
<dl>
<dt>绘制实心的文本</dt>
<dd></dd>
</dl>
<canvas id="textSC"></canvas>
<script type="text/javascript">
var textSC=document.getElementById('textSC');
var ctx=textSC.getContext("2d");
ctx.font='30px Arial';
ctx.fillText('Hello World',10,50);
</script>
<dl>
<dt>绘制空心的字体</dt>
<dd></dd>
</dl>
<canvas id="textKC"></canvas>
<script type="text/javascript">
var textKC=document.getElementById('textKC');
var ctx=textKC.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText('hello world',10,50);
</script>
<dl>
<dt>线性渐变</dt>
<dd>
<ol>
<li>createLinearGradient(x,y,x1,y1);</li>
<li>addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.</li>
</ol>
</dd>
</dl>
<canvas id="lineGC"></canvas>
<script type="text/javascript">
var c=document.getElementById("lineGC");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
<dl>
<dt>实现颈向/圆渐变</dt>
<dd>createRadialGradient(x,y,r,x1,y1,r1)</dd>
</dl>
<canvas id="circleGC"></canvas>
<script type="text/javascript">
var circleGC=document.getElementById('circleGC');
var ctx=circleGC.getContext('2d');
var grd=ctx.createRadialGradient(50,50,5,90,60,100);
grd.addColorStop(0,'red');
grd.addColorStop(1,'white');
ctx.fillStyle=grd;
ctx.fillRect(50,50,180,40);
</script>
<dl>
<dt>把图像放在画布上</dt>
<dd>drawImage(img,x,y);</dd>
</dl>
<canvas id="imgC"></canvas>
<img src="2.jpg" width="50" alt="" id="img">
<script type="text/javascript">
var imgC=document.getElementById('imgC');
var ctx=imgC.getContext('2d');
var img=document.getElementById('img');
ctx.drawImage(img,0,0);
</script>
</body>
</html>对应的页面：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
