1、直线
moveto()
lineto()
stroke(): 表示沿该路径绘制一条直线
-
<!DOCTYPE HTML>
-
<html>
-
<body>
-
<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
-
<script type="text/javascript">
-
var c=document.getElementById("myCanvas");
-
var context=c.getContext("2d");
-
context.moveTo(0,0);
-
context.lineTo(200,100);
-
context.stroke();
-
</script>
-
</body>
-
</html>
2、矩形
可以使用fillStyle和fillRect
使用strokeStyle和strokeRect是绘制有边框的矩形
-
<!DOCTYPE HTML>
-
<html>
-
<body>
-
<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
-
<script type="text/javascript">
-
var c=document.getElementById("myCanvas");
-
var context=c.getContext("2d");
-
context.fillStyle="#FF00FF";
-
context.fillRect(0,0,100,50);
-
</script>
-
</body>
-
</html>
3、圆形
使用beginPath arc closePath fill这4个方法
-
<!DOCTYPE HTML>
-
<html>
-
<body>
-
<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
-
<script type="text/javascript">
-
var c=document.getElementById("myCanvas");
-
var context=c.getContext("2d");
-
context.fillStyle="#FF00FF";
-
context.beginPath();
-
context.arc(100,75,50,0,Math.PI*2,true);
-
context.closePath();
-
context.fill();
-
</script>
-
</body>
-
</html>
弧线：使用stroke()方法
-
<!DOCTYPE HTML>
-
<html>
-
<body>
-
<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
-
<script type="text/javascript">
-
var c=document.getElementById("myCanvas");
-
var context=c.getContext("2d");
-
context.fillStyle="#FF00FF";
-
context.beginPath();
-
context.arc(100,75,50,0,Math.PI*3/2,true);
-
context.stroke();
-
</script>
-
</body>
-
</html>
4、三角形
-
<!DOCTYPE HTML>
-
<html>
-
<body>
-
<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
-
<script type="text/javascript">
-
var c=document.getElementById("myCanvas");
-
var context=c.getContext("2d");
-
context.fillStyle="#FF00FF";
-
context.beginPath();
-
context.moveTo(25,25);
-
context.lineTo(150,25);
-
context.lineTo(25,150);
-
context.fill();
-
</script>
-
</body>
-
</html>
5、清空画布
context.clearRect(0,0,300,200);
6、保存和恢复canvas状态
context.save() context.restore()
7、移动坐标
8、填充文字
-
<!DOCTYPE HTML>
-
<html>
-
<body>
-
<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
-
<script type="text/javascript">
-
var c=document.getElementById("myCanvas");
-
var context=c.getContext("2d");
-
context.fillStyle="#FF00FF";
-
cxt.font="italic 35px";
-
context.fillText("绘制填充的文字",30,100)
-
</script>
-
</body>
-
</html>
文字相关的属性：font textAlign textBaseline
绘制轮廓文字：strokeText()
测量文字宽度：measureText(text)
9、图像
（1）var img=new Image();
(2) img.src=""
(3)context.drawImage(image,x,y)
-
<!DOCTYPE HTML>
-
<html>
-
<head>
-
<script language="javascript">
-
function draw() {
-
var ctx = document.getElementById('myCanvas').getContext('2d');
-
var img = new Image();
-
img.onload = function(){
-
ctx.drawImage(img,0,0);
-
ctx.font = "italic 60px Arial Black";
-
ctx.shadowOffsetX = 3;
-
ctx.shadowOffsetY = 3;
-
ctx.shadowBlur = 2;
-
ctx.shadowColor = "rgba(0, 0, 0, 0.7)";
-
ctx.fillStyle = "White";
-
ctx.fillText("COOL",50,165);
-
}
-
img.src = 'images/bg.jpg';
-
}
-
window.onload=function(){
-
draw();
-
}
-
</script>
-
</head>
-
<body>
-
<canvas id="myCanvas" width="300" height="200"></canvas>
-
</body>
-
</html>
阅读(350) | 评论(0) | 转发(0) |
