canvas画画
- 坐标是以canvas的为标准的
- 画长方形 ：
- 画圆形 ：
- 画线条：
- 写文字：
- 写了一个王字（代码）：
- 效果图
1.基本语法：
html canvas 标签：
是个盒子（有长，宽）和div相同，但可以在里面画画
<canvas id="canvas1" width="400px" height="400px"></canvas>
<script>
var canvas=document.getElementById("canvas1");
var ctx=canvas.getContext('2d');
</script>
坐标是以canvas的为标准的
开始画：
画长方形 ：
ctx.fillStyle=“颜色”； 填充颜色
ctx.fillRect(矩形左上角x坐标 ,矩形左上角 y坐标, width, height, );
连续的对应的
ctx.fillStyle="black";
ctx.fillRect(0,0,20,20);
画圆形 ：
ctx.arc(x,y,radius,sAngle,eAngel，true)；
false/true :顺时针或者逆时针:画圆形
sAngle 默认为0方便画圆
x,y圆上的圆心坐标，radius为半径，
sAngle:绘制开始的角度。 圆心到最右边点是0度，顺时针方向弧度增大。
eAngel:结束的角度，注意是弧度。
弧度和角度的转换公式： rad = deg*Math.PI/180;
ctx.stroke(); 实线绘圆的框架/或者线条
ctx.fill(); 填充颜色（上一个设置的ctx.fillStyle）
2*Math.PI：周长 完整圆形
Math.PI ：半圆形
ctx.arc(150,150,30,0,2*Math.PI,true);
ctx.stroke();
半圆形
ctx.fillStyle="pink";
ctx.arc(150,150,30,0,Math.PI,true);
ctx.stroke();
ctx.fill();
画线条：
ctx.moveTo(x坐标, y坐标); 线条的起点
ctx.lineTo(x坐标, y坐标); 线条的终点
ctx.strokeStyle=“red” 线条颜色，
ctx.beginPath(); //重新开始一条路径使颜色不互相影响
ctx.moveTo(10, 10);
ctx.lineTo(10,200);
ctx.stroke();
写文字：
clearRect(X,Y, width, height)
clearRect() 方法清空给定矩形内的指定像素(清空矩形内内容)
ctx.clearRect(0, 0,600,600);
ctx.fillText(“文字”,x坐标, y坐标);
ctx.fillText("hello world!",100,200);
写了一个王字（代码）：
<style>
canvas{
border: 2px solid black;
}
</style>
<body>
<canvas id="canvas1" width="400px" height="400px"></canvas>
<script>
var canvas=document.getElementById("canvas1");
var ctx=canvas.getContext("2d");
console.dir(ctx);
ctx.moveTo(30,30);
ctx.lineTo(300,30);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(30,170);
ctx.lineTo(300,170);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(30,300);
ctx.lineTo(300,300);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(150,30);
ctx.lineTo(150,300);
ctx.stroke();
</script>
效果图
