Chinaunix首页 | 论坛 | 博客
  • 博客访问: 325584
  • 博文数量: 206
  • 博客积分: 1040
  • 博客等级: 少尉
  • 技术积分: 1756
  • 用 户 组: 普通用户
  • 注册时间: 2012-04-09 17:22
文章分类

全部博文(206)

文章存档

2015年(3)

2014年(147)

2013年(2)

2012年(54)

我的朋友

分类: HTML5

2014-02-11 14:55:20

1、直线
moveto()
lineto()
stroke(): 表示沿该路径绘制一条直线

点击(此处)折叠或打开

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
  5. <script type="text/javascript">
  6. var c=document.getElementById("myCanvas");
  7. var context=c.getContext("2d");
  8. context.moveTo(0,0);
  9. context.lineTo(200,100);
  10. context.stroke();
  11. </script>
  12. </body>
  13. </html>
2、矩形
可以使用fillStyle和fillRect
使用strokeStyle和strokeRect是绘制有边框的矩形

点击(此处)折叠或打开

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
  5. <script type="text/javascript">
  6. var c=document.getElementById("myCanvas");
  7. var context=c.getContext("2d");
  8. context.fillStyle="#FF00FF";
  9. context.fillRect(0,0,100,50);
  10. </script>
  11. </body>
  12. </html>
3、圆形
使用beginPath  arc  closePath  fill这4个方法

点击(此处)折叠或打开

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
  5. <script type="text/javascript">
  6. var c=document.getElementById("myCanvas");
  7. var context=c.getContext("2d");
  8. context.fillStyle="#FF00FF";
  9. context.beginPath();
  10. context.arc(100,75,50,0,Math.PI*2,true);
  11. context.closePath();
  12. context.fill();
  13. </script>
  14. </body>
  15. </html>
弧线:使用stroke()方法

点击(此处)折叠或打开

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
  5. <script type="text/javascript">
  6. var c=document.getElementById("myCanvas");
  7. var context=c.getContext("2d");
  8. context.fillStyle="#FF00FF";
  9. context.beginPath();
  10. context.arc(100,75,50,0,Math.PI*3/2,true);
  11. context.stroke();
  12. </script>
  13. </body>
  14. </html>
4、三角形

点击(此处)折叠或打开

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
  5. <script type="text/javascript">
  6. var c=document.getElementById("myCanvas");
  7. var context=c.getContext("2d");
  8. context.fillStyle="#FF00FF";
  9. context.beginPath();
  10. context.moveTo(25,25);
  11. context.lineTo(150,25);
  12. context.lineTo(25,150);
  13. context.fill();
  14. </script>
  15. </body>
  16. </html>

5、清空画布
context.clearRect(0,0,300,200);

6、保存和恢复canvas状态
context.save()     context.restore()

7、移动坐标

8、填充文字

点击(此处)折叠或打开

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. <canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
  5. <script type="text/javascript">
  6. var c=document.getElementById("myCanvas");
  7. var context=c.getContext("2d");
  8. context.fillStyle="#FF00FF";
  9. cxt.font="italic 35px";
  10. context.fillText("绘制填充的文字",30,100)
  11. </script>
  12. </body>
  13. </html>
文字相关的属性:font  textAlign  textBaseline
绘制轮廓文字:strokeText()
测量文字宽度:measureText(text)
 
9、图像
(1)var img=new Image();
(2) img.src=""
(3)context.drawImage(image,x,y)

点击(此处)折叠或打开

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <script language="javascript">
  5. function draw() {
  6.     var ctx = document.getElementById('myCanvas').getContext('2d');
  7.     var img = new Image();
  8.     img.onload = function(){
  9.         ctx.drawImage(img,0,0);
  10.         ctx.font = "italic 60px Arial Black";
  11.         ctx.shadowOffsetX = 3;
  12.         ctx.shadowOffsetY = 3;
  13.         ctx.shadowBlur = 2;
  14.         ctx.shadowColor = "rgba(0, 0, 0, 0.7)";
  15.         ctx.fillStyle = "White";
  16.         ctx.fillText("COOL",50,165);
  17.     }
  18.     img.src = 'images/bg.jpg';
  19. }
  20. window.onload=function(){
  21.     draw();
  22. }
  23. </script>
  24. </head>
  25. <body>
  26. <canvas id="myCanvas" width="300" height="200"></canvas>
  27. </body>
  28. </html>

阅读(291) | 评论(0) | 转发(0) |
0

上一篇:html5记录

下一篇:canvas小案例

给主人留下些什么吧!~~