2018-04-27 canvas入门

1. MDN

canvas只有两个属性，width和height

 
  
 
   //body里要加上这个
   
 

2. 奕泽画板

1. canvas相关API

//获取canvas标签
var canvas = document.querySelector("#canvas");  

//获得渲染上下文，画画的操作就全部在context上了
let context = canvas.getContext('2d')

// 设置画板大小为屏幕大小
canvas.width = document.documentElement.clientWidth
canvas.height = document.documentElement.clientHeight

//画线
canvas.onmousemove = function(ev) {
  var x = ev.clientX;
  var y = ev.clientY;
  // ......记下来前一个点和后一个点
  function drawLine(x1,y1,x2,y2) {
    context.beginPath();
    context.moveTo(x1-0,y1+29);  //起点
    context.lineTo(x2-0,y2+29);  //终点
    context.lineWidth = 5;  //线的粗细
    context.stroke();  //将各个点练成线
  }
}


//画三角形
function drawLine(x1,y1,x2,y2) {
    context.beginPath();
    context.moveTo(x1,y1);  //起点
    context.lineTo(x2,y2);  //第二个点
    context.lineTo(x3,y3);  //第三个点
    context.closePath();  //将第一个点和最后一个点连起来
    context.stroke();  //将各个点练成线
}

//画圆圈
function drawTriangle(x,y,r) {
  context.beginPath();
  context.arc(x-0,y+29,r,0,Math.PI*2);  //left，top，半径， 起点（以原点为圆心从第一象限的x轴开始往y轴负方向画圈），终点
  context.fill();  //将圆圈填色
}
context.strokeStyle = 'black';  //线的颜色
context.fillStyle = 'black';  //圆圈填充的颜色
context.clearRect(x,y,30,30);  //橡皮擦功能，被清除部分变透明

3. DOM元素

//触屏设备
canvas.ontouchstart = function(ev){
  var x = ev.touches[0].clientX;  //获取点击的位置
  var y = ev.touches[0].clientY;
}
canvas.ontouchmove = function(){}

//非触屏设备
canvas.onmousedown = function(ev){}
canvas.onmousemove = function (ev) {}
canvas.onmouseup = function () {}
canvas.onmouseout = function () {}