阅读 104

HTML5的Canvas标签入门

一、初步使用 <canvas>标签

我们先用以前的知识画一个简略的,用的是div标签,简略版 一个简单的小democanvas 默认的大小是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里面作图必然影响
此时的坐标.png
去除之后
去除margin.png


二、画布的demo

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