HTML5的Canvas标签入门

一、初步使用 `<canvas>`标签

我们先用以前的知识画一个简略的，用的是div标签，简略版一个简单的小demo， canvas 默认的大小是300*150

HTML代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <canvas id="canvas" width="300px" height="300px">
    
  </canvas>
</body>
</html>

JavaScript代码如下：

var isPainting = false;
var canvas =document.getElementById("canvas");
canvas.onmousedown = function(msg){
  isPainting = true;
  var x = msg.clientX;
//   console.log(x);
  var y = msg.clientY;
//   console.log(y);
  var context = canvas.getContext('2d');
  context.beginPath();
  context.arc(x, y, 1, 0, 360);
  context.fill();
};
canvas.onmousemove = function(msg){
  if(isPainting){
    var x = msg.clientX;
  var y = msg.clientY;
  var context = canvas.getContext('2d');
  context.beginPath();
  context.arc(x, y, 1, 0, 360);
  context.fill();
  } else{
  
  }
}
canvas.onmouseup = function(msg){
  isPainting = false;
  
}

主要的是以下几句：

  var context = canvas.getContext('2d'); //canvas的上下文环境
  context.beginPath(); //开始画图
  context.arc(x, y, 1, 0, 360); //画一个圆，圆心坐标是(x, y) 半径1px,从0度到 360度。如果是其他数是3.141592678
  context.fill(); //填充

绘制Rectangle 矩形

  context.stroke() //只画边界
  context.fillStyle = 'red'; //用红色填充 //这句话要在前面，因为要先画上去
  fillRect(x,y,width,height) //画一个矩形
  strokeRect(x,y,width,height) //画一个矩形边框
  clearRect(x,y,width,height) //清楚规定大小的矩形

总结：除了矩形，其他的都用context.beginPath()开始画图 getContext的用法让我想起了Java里的request.getContextPath()来获得绝对路径名字，EL表达式就是${pageContext.request.contextPath()}，如此怀念那段日子。

注意一个小Bug

body默认的margin是8px,会影响你做圆时的位置，避免这个bug就把这个margin设置为0

[图片上传中...(此时的坐标.png-d559cd-1513917965074-0)]

你想定位的坐标是（9,8）,这个坐标是相对于视口的，也就是说是相对于HTML那个的，如果你在canvas里面作图必然影响

去除之后

二、画布的demo

要想做出全屏的canvas，一定不能用width='100wh' height='100vh'，因为这个会等比缩放

HTML5的Canvas标签入门

一、初步使用 <canvas>标签

注意一个小Bug

二、画布的demo

一、初步使用 `<canvas>`标签