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
