Canvas使用方法总结

• 引入Canvas标签

在HTML中写标签
<canvas id="Mycanvas" width="400px" height="300px">
</canvas>
//设置画布的宽高，当然，也可以增加其他样式
在JavaScript中引入
     c = document.getElementById("Mycanvas");
//获得canvas标签
     ctx = c.getContext("2d");//设置2D环境
     ctx.lineWidth=10;//设置线宽，以下不重复

• 绘制直线

   ctx.strokeStyle="red";
   ctx.beginPath();
   ctx.moveTo(10,40);
   ctx.lineTo(150,40);
   ctx.stroke();
 三种线冒样式
   ctx.lineCap="buttun";
   ctx.lineCap="round";
   ctx.lineCap="square";

• 绘制矩形

   //实心矩形
    cxt.fillStyle="#ff0000";
    cxt.fillRect(10,10,50,20);//X，Y，width,height
   //空心矩形
    cxt.strokeStyle="#0000ff";
    cxt.strokeRect(100,80,60,90);

• 绘制圆弧

    ctx.lineWidth = 5;
    ctx.strokeStyle= "red";

    ctx.beginPath();
    ctx.arc(300,300,180,0,130*Math.PI/180,true);
    ctx.stroke();

    ctx.beginPath();
    ctx.fillStyle = "yelleow";
    ctx.arc(400,400,180,0,130*Math.PI/180,true);
    ctx.fill();

• 绘制文本

ctx.beginPath();
ctx.font = "30px Arial"; //设置字体大小和字体
ctx.fillText("Hello World",50,70,200);

// ctx.beginPath();
// ctx.font="bold 30px Arial";
// ctx.fillText("Hello World",50,100);
//normal bold bolder lighter 也可以通过数字来写
//
// ctx.beginPath();
// ctx.font="italic 30px Arial";
// ctx.fillText("Hello World",50,130);//italic oblique

var c2 = document.getElementById("myCanvas2"); 
//获取HTML的canvas标签
var ctx2 = c2.getContext("2d");//设置2D环境
ctx2.font = "30px Arial"; //设置字体大小和字体
ctx2.strokeText("Hello World",50,70,200);

• 绘制图片

var image = new Image();
image.src="Image/LiBai.jpg";
image.onload = function () {
  ctx.drawImage(image,20,20);
};

我的github:
https://github.com/QinRenMin/basicalCanvas