小白入门---HTML5标签canvas

HTML5标签canvas

1、canvas简介

1、canvas:

* >做游戏：白鹭引擎、trees…;

* >做动画；做动态图表，频谱；画图…

* HTML5不是单纯的html

* canvas本身是一个标签,是一个空白的画布，默认是300*150的宽高

* 本身有宽高的属性，不需要使用CSS去设置，如果非要设置，一定要和canvas的宽高设置相同，不然绘制出来的内容就是变形的

* 如果希望画布上有内容，需要通过JS来绘制->是通过画布的上下文(相当于舞台，舞台上面可以有各种移动，展示出来)进行绘制的

2、使用步骤：

* >1.创建一个空白画布

* >2.获得画布的上下文

* >3.绘制准备：设置要绘制的一些样式和内容(画笔的宽，颜色，所需的资源)

* >4.开始绘制

3、HTMLCanvasElement的2个属性:

* >width:宽；

* >height:高

* >lineWidth：设置笔画宽度

4、HTMLCanvasElement的方法：

* >getContext(inDOMString contextId)，可以传2d或者experimental-webgl(图形图像处理)

* >toDataURL():把canvas对象转成url->生成带有绘制内容的一个资源链接地址

* >moveTo(x,y):抬起笔来要落到哪一个位置

* >lineTo(x,y):画线到某个点

* >stroke(不传||path)：把画的内容绘制出来:path是2d类型的

* >beginPath():标识，要开始一个路径

* >closePath():标识，要闭合一个路径

* >clearRect():是 Canvas 2D API 设置指定矩形区域内（以 点 (x, y) 为起点，范围是(width, height) ）所有像素变成透明，并擦除之前绘制的所有内容的方法。

* >canvas:获得画布的DOM元素；

* >lineCap：设置画笔结束位置的形状(butt:方形，round：圆形，square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。)

* >CanvasRenderingContext2D.createLinearGradient()Canvas 2D API 的方法沿着由参数表示的坐标给出的线创建一个梯度。

* >CanvasRenderingContext2D.createRadialGradient()Canvas 2D API 的方法创建由参数表示的两个圆的坐标给出的径向渐变。此方法返回a CanvasGradient。

* >CanvasRenderingContext2D.arc（x<原点x坐标>，y<原点y坐标>，radius<半径>，startAngle<起始角度>，endAngle<结束角度>，anticlockwise<是否逆时针>）:其在中心的路径（X，Y）与半径位置[R开始于由startAngle和在结束endAngle通过在给定的方向上行进逆时针（默认顺时针）。

* >CanvasRenderingContext2D.createLinearGradient()//创建一个渐变对象

* >CanvasRenderingContext2D.strokeText(text，x，y [，maxWidth]);Canvas 2D API 的方法在给定的(x，y)位置上触发给定的文本。如果提供了最大宽度的可选第四个参数，文本将被缩放以适应该宽度。

* >Scale(x,y):放大缩小，不会影响到画布本身，所放的是画布里面的内容(让画布里面的单位进行缩放)

* >Save():保存画布上面之前的样式，即在写save之前的样式，包括(笔画宽度，颜色，变形)

* >Restore()：还原的是上一次保存的状态，多次retore也是返回上次保存的内容[1]->1.[1,2]->2,1

* >Translate():平移，以画布的原点为参考。也相当于重新设置原点。

* >Rotate(anglePI/180*角度):旋转，旋转中心点一直是 canvas 的起始点。并没有旋转canvas，旋转的是后续绘制在canvas上的图形。 如果想改变中心点，我们可以通过 translate() 方法移动 canvas 。

5、 CanvasGradient :设置canvas里免颜色渐变的类，可以通过设置颜色的方式(fillStyl/strokeStyle)去设置渐变对象

* 方法：

* >addColorStop(offset(0-1),color):这个方法可以多次调用添加渐变的颜色值

6、canvas里面的动画：

* >1.通过不断刷新canvas里面的内容，实现动画

* >2.清除上一次canvas里面的内容

2、基本方法使用方法

(function(){
var rectX=0;
var rectY=0;
var timer;
function init(){
//dom操作  HTMLElement
//canvas：HTMLCanvasElement
var canvasEle=document.querySelector("#box");
canvasEle.width
16d73
=innerWidth;
canvasEle.height=innerHeight;
/*获得画布的上下文
* 返回一个 CanvasRenderingContext2D对象：提供了绘制，设置绘制内容的方法属性
* >fillStyle：设置填充的样式(充满)
* >storkeStyle：设置绘制内容轮廓的样式
* >fillRect(x,y,w,h):绘制矩形的方法,以填充的方式绘制,原点是画布的左上角
*/
var context=canvasEle.getContext("2d");
//设置要绘制的参数
//      context.fillStyle="red";
//设置绘制内容轮廓的样式
//      context.strokeStyle="yellow";
//距离原点左上角100,边长为50，50()的画布
//context.fillRect(100,100,50,50);
context.lineWidth=2;
/*context.moveTo(200,100);
context.lineTo(400,100);
context.moveTo(400,100);
context.lineTo(400,200);
context.moveTo(400,200);
context.lineTo(200,200);
context.moveTo(200,200);
context.lineTo(200,100);
context.stroke();*/
rectX=50;
rectY=30;
drawRect({
context:context,
strokeColor:"white",
fillColor:"orange",
x:50,
y:30,
width:100,
height:100
});
/*setTimeout(function(){
context.clearRect(0,0,innerWidth,innerHeight);
},3000);
rectControl(context);*/
}
//封装一个画矩形的方法
function drawRect(info){
if(!info){
console.log("必须传参数");
return;
}
info.context.strokeStyle=info.strokeColor;
info.context.fillStyle=info.fillColor;
info.context.beginPath();//是 Canvas 2D API 通过清空子路径列表开始一个新路径的方法。 当你想创建一个新的路径时，调用此方法。
info.context.moveTo(info.x,info.y);
info.context.lineTo(info.x+info.width,info.y);
info.context.lineTo(info.x+info.width,info.y+info.height);
info.context.lineTo(info.x,info.y+info.height);
//      info.context.lineTo(info.x,info.y);
info.context.closePath();//是 Canvas 2D API 将笔点返回到当前子路径起始点的方法
info.context.fill();//是 Canvas 2D API 根据当前的填充样式，填充当前或已存在的路径的方法
info.context.stroke();
}
function rectControl(context){
document.onkeydown=function(event){//当按下wasd的时候执行不同的动画
var dis="";
//          console.log(event);
switch(event.keyCode){
case 87:
dis="top";
break;
case 65:
dis="left";
break;
case 83:
dis="bottom";
break;
case 68:
dis="right";
break;
default:
break;
}
move(context,dis);
};
document.onkeyup=function(){
clearInterval(timer);
timer=null;
}
}
function move(context,direction){
context.clearRect(1,1,innerWidth,innerHeight);//清除上一帧
var distance=5;
switch(direction){
case "left":
rectX-=distance;
break;
case "right":
rectX+=distance;
break;
case "top":
rectY-=distance;
console.log(rectY)
break;
case "bottom":
rectY+=distance;
break;
}
drawRect({
context:context,
strokeColor:"white",
fillColor:"orange",
x:rectX,
y:rectY,
width:100,
height:100
});
if(timer){return}//自己调用自己，如果有timer，就不要去创建，如果不写，每次都创建，定时器效果会叠加
timer=setInterval(function(){
move(context,direction);
},30)
}
init();
})();

(function(){
function init(){
/*var canvasEle=document.querySelector("#box");
canvasEle.width=innerWidth;
canvasEle.height=innerHeight;
window.onresize=function(){
cavnasEle.width=innerWidth;
canvasEle.height=innerHeight;
};
var context=canvasEle.getContext("2d");
var linearGradient=context.createLinearGradient(0,0,innerWidth,innerHeight);//创建线性渐变的方法->CanvasGradient类型的对象
linearGradient.addColorStop(0,"blue");
linearGradient.addColorStop(0.5,"white");
linearGradient.addColorStop(1,"green");
context.fillStyle=linearGradient;//添加颜色渐变
context.strokeStyle=linearGradient;
context.font="40px 华文楷体";
context.strokeText("你好",100,100);
context.fillText("你好",200,200);
//      context.fillRect(0,0,innerWidth,innerHeight);*/
}
init();
})();

(function(){
var context=document.getElementById("container").getContext("2d");
function scale(){
context.save();//保存上一次canvas里面的状态
context.scale(0.5,1);//先放大缩小才行，放大缩小的是画布里面的内容的像素点，画布本身没有变化
context.fillStyle="red";
context.fillRect(100,100,100,100);
context.restore();//还原上次保存的状态
context.save();
context.fillStyle="yellow";
context.fillRect(100,100,50,50)
context.restore();
context.fillRect(0,0,50,50)
}
function test(){
context.save();
context.strokeStyle="green";
context.lineWidth=5;
context.moveTo(0,0);
context.lineTo(300,50);
context.stroke();
context.restore();
context.moveTo(0,100);
context.lineTo(300,100);
context.stroke();
}
function move(){
context.save();
context.translate(200,-100);//沿着x向右移动200px，沿着y向上一定100px，移动的时候是以原点为中心去移动的
context.fillRect(300,300,100,100);
context.restore();
context.fillStyle="yellow";
context.fillRect(300,300,50,50);
}
function rotation(){
context.rotate(2*Math.PI/360*45);//旋转45度
context.fillText("nhao",300,300)
context.fillRect(300,300,50,50);
}
function init(){
scale();
test();
move();
rotation();
}
init();
})();

3、canvas具体实例

1.自制画板

》HTML部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>painter</title>
<style type="text/css">
*{margin: 0;padding: 0;}
html{overflow: hidden;}
#box{background-color: #242424;}
.toolMenu{position: absolute;}
.openButton{width: 50px;height: 50px;background-color: #ff3c1a;border-radius: 50%;}
.tool{background-color: yellow;}
.tool li{margin-top: 5px;}
a{text-decoration: none;background-color: #bebebe;width: 60px;text-align: center;display: block;}
</style>
</head>
<body>
<div class="toolMenu">
<div class="openButton"></div>
<ul class="tool">
<li>宽度<input type="range"/></li>
<li>颜色<input type="color"/></li>
<li><a class="download" download="photo">下载</a></li>
<li><a class="clear" herf="#">清屏</a></li>
<li><a class="eraser" herf="#">橡皮擦</a></li>
</ul>
</div>
<canvas id="box"></canvas>

<script src="js/painter.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

》painter.js：面向对象写法

(function(){
function Painter(id){
var canvasEle=document.getElementById(id);
canvasEle.width=innerWidth;
canvasEle.height=innerHeight;
this.context=canvasEle.getContext("2d");
//      this.context.strokeStyle="white";
this.drawLine();
this.bgcolor=document.defaultView.getComputedStyle(canvasEle, null).backgroundColor;
}
Painter.prototype.drawLine=function(){
var self=this;
self.context.canvas.addEventListener("mousedown",startAction);
self.context.canvas.addEventListener("mouseup",endAction);
function startAction(event){
if(!self.isClear){//如果没有使用橡皮擦就是划线的功能
self.context.beginPath();
self.context.moveTo(event.pageX,event.pageY);
self.context.stroke();
}
self.context.canvas.addEventListener("mousemove",moveAction);
}
function endAction(){
self.isClear=false;//不再使用橡皮擦的功能
self.context.canvas.removeEventListener("mousemove",moveAction);
}
function moveAction(event){
if(self.isClear){//移动的时候清除，-8的原因是要让他移动到中间
self.context.clearRect(event.pageX-8,event.pageY-8,16,16);
return;
}
self.context.lineTo(event.pageX,event.pageY);
self.context.stroke();
}
}
Painter.prototype.setLineWidth=function(width){
this.context.lineWidth=width;
}
Painter.prototype.isRoundLineCap=function(isRound){
this.context.lineCap=isRound?"round":"butt";
}
Painter.prototype.setLineColor=function(color){
this.context.strokeStyle=color;
}
Painter.prototype.save=function(){
return this.context.canvas.toDataURL();//吧绘制的内容保存成一个图片地址
}
Painter.prototype.clear=function(){
this.context.clearRect(0,0,innerWidth,innerHeight);
}
/*  Painter.prototype.eraser=function(){
this.setLineColor(this.bgcolor);
this.drawLine();
}*/
Painter.prototype.rubber=function(){
this.isClear=true;
}
window.Painter=Painter;
})();

》main.js调用过程：

(function(){
function init(){
var painter=new Painter("box");
painter.setLineWidth(5);
painter.isRoundLineCap(true);
painter.setLineColor("red");
var toolView=document.querySelector(".tool")
document.querySelector(".openButton").onclick=function(){           toolView.style.display=toolView.style.display==="block"?"none":"block";
};      document.querySelector("input[type=range]").value=painter.context.lineWidth*2;
document.querySelector("input[type=range]").onchange=function(){
painter.setLineWidth(this.value/4);
};      document.querySelector("input[type=color]").value=painter.context.strokeStyle;
document.querySelector("input[type=color]").onchange=function(){
painter.setLineColor(this.value);
};
var download=document.querySelector(".download");
download.onclick=function(){
download.setAttribute("href",painter.save());
};
document.querySelector(".clear").onclick=function(){
painter.clear();
};
var eraser=document.querySelector(".eraser");
/*eraser.onclick=function(){
eraser.innerHTML=eraser.innerHTML==="橡皮擦"?"停止":"橡皮擦";
if(eraser.innerHTML=="停止"){
document.body.style.cursor="url(img/eraser.png),pointer";
painter.eraser();
}else{
document.body.style.cursor="";              painter.setLineColor(document.querySelector("input[type=color]").value)
painter.drawLine()
}
};*/
eraser.onclick=function(){
painter.rubber();
}
}
init();
})();

2、制作动态柱状图

》使用面向对象直接创建表格

(function(){
/*1.封装表格的背景
*2.绘制带文字小方块
* datas是传过来的需要可视化的数据
*/
function Table(superEle,datas){
this.canvasContext=document.createElement("canvas").getContext("2d");//创建canvas对象
superEle.appendChild(this.canvasContext.canvas);//添加到父元素中
this.width=this.canvasContext.canvas.width=innerWidth;//设置宽
this.height=this.canvasContext.canvas.height=innerHeight;//设置高
this.datas=datas||[];
this.background();
this.addRect();
}
Table.prototype.background=function(){
this.canvasContext.beginPath();
this.canvasContext.strokeStyle="black";
var space=10;
this.canvasContext.strokeRect(space,space,this.width-space*2,this.height-space*2);//绘制矩形，边距留白
var lineHeight=(this.height-space*2)/10;
for(var i=1;i<10;i++){//绘制背景的9根线
this.canvasContext.moveTo(space,space+lineHeight*i);
this.canvasContext.lineTo(this.width-space,space+lineHeight*i);
this.canvasContext.stroke();
}
}
Table.prototype.addRect=function(){
var gradient=this.canvasContext.createLinearGradient(0,0,0,this.height);
gradient.addColorStop(0,"red");
gradient.addColorStop(1,"green");
this.canvasContext.fillStyle=gradient;
//宽度间距
var rectWidth=this.width-10*2;//总宽度
var rectHeight=this.height-10*2;//总高度
var space=rectWidth/this.datas.length/5;
var width=(rectWidth-space*(this.datas.length+1))/this.datas.length;
var max=1000;
var heightScale=rectHeight/max;//计算比例
for (var i=0;i<this.datas.length;i++) {
var height=this.datas[i]*heightScale;
var y=this.height-10-height;//总宽度-边距-小方块宽度
this.canvasContext.fillRect(space+(space+width)*i+10,y,width,height);
}
}
Table.prototype.setDatas=function(datas){
this.datas=datas;
this.canvasContext.clearRect(0,0,innerWidth,innerHeight);//清除上一次的内容然后再新建
this.background();
this.addRect();
}
window.Table=Table;
})();

》调用创建的表格

var table=new Table(document.body,[33,200,500,90,100,800,770,1000,560]);
setInterval(function(){
var datas=[];
for (var i=0;i<10;i++) {
datas.push(Math.random()*1000);//随机创建数组
}
table.setDatas(datas);//将新的数据传入到table中
},1000*Math.random()*4);

3、绘制太极图和调试贝塞尔曲线

》HTML部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html{overflow: hidden;}
*{margin: 0;padding: 0;}
#box{background-color: #242424;}
div{
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
position: absolute;
left: 100px;
top: 200px;
text-align: center;
line-height: 20px;
}
</style>
</head>
<body>
<canvas id="box"></canvas>
<div class="startPoint">b</div>
<div class="endPoint">e</div>
<div class="Point1">1</div>
<div class="Point2">2</div>

<script src="js/circle.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

》具体的js代码：

(function(){
var curEle=null;
var startPoint=document.querySelector(".startPoint");
var endPoint=document.querySelector(".endPoint");
var Point1=document.querySelector(".Point1");
var Point2=document.querySelector(".Point2");
var context=null;
function init(){
var canvasEle=document.querySelector("#box");
canvasEle.width=innerWidth;
canvasEle.height=innerHeight;
window.onresize=function(){
canvasEle.width=innerWidth;
canvasEle.height=innerHeight;
};
context=canvasEle.getContext("2d");
context.strokeStyle="white";
context.lineWidth=10;
//x,y,radius,startAngle,endAngle,anticlockwise(默认逆时针)
/*context.beginPath();
context.arc(500,300,200,0,Math.PI*2,true);
context.stroke();
context.beginPath();
context.arc(600,300,100,0,Math.PI,true);
context.stroke();
context.beginPath();
context.arc(400,300,100,0,Math.PI,false);
context.stroke();
context.beginPath();
context.moveTo(300,300);
context.bezierCurveTo(500,400,200,400,600,600);
context.stroke();*/
for(var i=0;i<4;i++){//循环给每个元素添加事件
addEvent([startPoint,endPoint,Point1,Point2][i]);
}
document.ondblclick=function(){
document.removeEventListener("mousemove",move)
};
}
function addEvent(ele){
ele.onmousedown=function(){
curEle=this;
document.addEventListener("mousemove",move)
};
}
function move(event){
curEle.style.left=event.pageX+"px";
curEle.style.top=event.pageY+"px";
context.clearRect(0,0,innerWidth,innerWidth);
context.beginPath();
context.moveTo(getLeft(startPoint),getTop(startPoint));
context.bezierCurveTo(getLeft(Point1),getTop(Point1),getLeft(Point2),getTop(Point2),getLeft(endPoint),getTop(endPoint));
context.stroke();
}
function getLeft(ele){
return parseInt(ele.style.left)
}
function getTop(ele){
return parseInt(ele.style.top)
}
init();
})();