Tip1.HTML

<canvas id="canvas" width="300" height="300"></canvas>
<button id="eraser">橡皮擦</button>

Tip2.获取canvas 与绘画上下文

var canvasP=document.getElementById('canvas'); //获取html中的canvas（id）
var context=canvasP.getContext('2d');  //获取上下文

Tip2.2获取屏幕高宽

pageHW()
function pageHW(){
  var pageWidth=document.docuementElement.clientWidth
  var pageHeight=document.docuementElement.clientHeight
  context.width=pageWidth
  context.width=pageHight
}

window.onresize =function(){  //当页面宽高 变动 在执行一次pageHW()
pageHW()
}

Tip2.3 橡皮擦

var usingEraser=flase
eraser.onclick=function(){
  usingEraser=!usingEraser    //取反  如果传进来的值为true    usingEraser就等于flase
}

Tip3.画一个圆

创建一个圆的函数

function drawCircle(x,y,radius){
context.beginPath();  
context.arc(x,y,radius,0,Math.PI*2) ;
context.fill(); 
}

Tip4.鼠标事件

var using=false //
context.onmousedown=function(a){
  using=true
  var x=a.clientX //获取鼠标按下 x的值
  var y=a.clientY    //获取鼠标按下Y的值
  driawCircle(x,y,5) //值带入画圆的函数
}
context.onmousemove=function(a){   //移动的时候画圈
  if(using){   //如果painting为true
    var x=a.clientX //获取鼠标按下 x的值
    var y=a.clientY    //获取鼠标按下Y的值
    driawCircle(x,y,5) //值带入画圆的函数
    }
}
context.onmouseup=function(a){
using=false;
}

Tip5.连接鼠标移动中 点的连线

function drawLine(x1,y1,x2,y2){ // x1,y1  与x2,y2 分别为鼠标之前的点与现在的点的坐标
context.beginPath();
context.moveTo(x1,y1);
context.lineWidth=5;
context.lineTo(x2,y2);
context.stroke();
context.closePath();
}

Tip6.完善第4步

var using=false //
var lastPoint={x:undefind,y:undefind}  //记录之前的点
context.onmousedown=function(a){
  using=true
  var x=a.clientX //获取鼠标按下 x的值
  var y=a.clientY    //获取鼠标按下Y的值
  lostPoint={x:x,y:y}
  driawCircle(x,y,5) //值带入画圆的函数
}
context.onmousemove=function(a){   //移动的时候画圈
  if(using){   //如果painting为true
    var x=a.clientX //获取鼠标按下 x的值
    var y=a.clientY    //获取鼠标按下Y的值
    var newPoint={x:x,y:y}
    driawCircle(x,y,5) //值带入画圆的函数
    driawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y) //数据带入 driawLine函数
    lastPoint=newPoint   //每次将新点赋值给之前的点
}else{

}
}
context.onmouseup=function(a){
using=false;
}

Tip7完善第6步

var usting=false //
var lastPoint={x:undefind,y:undefind}  //记录之前的点
context.onmousedown=function(a){
  
  var x=a.clientX //获取鼠标按下 x的值
  var y=a.clientY    //获取鼠标按下Y的值
  if(eraserEnable){
  context.clearRect(x-5,y-5,10,10)
}else{
  painting=true
  lostPoint={x:x,y:y}
  driawCircle(x,y,5) //值带入画圆的函数
}
}
context.onmousemove=function(a){   //移动的时候画圈
    var x=a.clientX //获取鼠标按下 x的值
    var y=a.clientY    //获取鼠标按下Y的值
if(eraserEnable){
    if(using){
      context.clearRect(x-5,y-5,10,10)
    }
}else{
    if(using){   //如果painting为true
    var newPoint={x:x,y:y}
    driawCircle(x,y,5) //值带入画圆的函数
    driawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y) //数据带入 driawLine函数
    lastPoint=newPoint   //每次将新点赋值给之前的点
    }
  }
}
context.onmouseup=function(a){
painting=false;
}


var eraserEnable=false //默认关闭橡皮擦
earser.onclick=function(){
eraserEnable=!eraserEnable
}

Title.常用API

描边

context.strokeStyle='green'  描边颜色
context.strokeRect(0,0,100,100) //描边坐标

绘制一个矩形

context.fillStyle='red';  //绘制图形的颜色
context.fillRect(0,0,100,100) ;   //0,0左上角坐标 100,100 右下角坐
fillStyle  fillRect 有先后顺序

绘制一个三角形

context.fillStyle='red' //填充颜色
context.beginPath();  //开始
context.moveTo(240,240) //移动到一个#点# （X，Y）
context.lineTo(300,240) //  连接一个点
context.lineTo(300,300)    //连接一个点
//context.lineWidth=5  线宽
context.fill()     //填充
context.closePath() //结束

橡皮擦

context.clearRect(50,50,10,10) //清楚坐标50，50    大小10，10  

绘制一个圆

context.beginPath();  //开始
context.arc(150,150,20,0,Math.PI*2)  //150,150 圆心 20 半径 0 0度 Math.PI*2 一周 (π)

鼠标事件 按下 移动 弹起

document.onmousedown=function(x){      //鼠标按下
console.log(x)             //事件相关信息
}
document.onmousemove=function(y){      //鼠标移动
console.log(y)
}
document.onmouseup=function(z){          //鼠标抬起
console.log('抬起')
}

控制台-事件信息

获取屏幕高宽

var pagewidth=document.documentElement.clientWidth
var pageHeight=document.documentElement.clientHeight