canvas基础
<canvas id="c1" width="400" height="400">
你的浏览器不支持！
<!--默认有宽高 : width:300 height:150 。
canvas的正确设置宽高 :属性 width="400" height="400" -->
</canvas><script>
var mycanvas = document.getElementById("c1");
mycanvas.width = 1000;
</script>
canvas宽高通过标签属性实现
<style>
body {
background: black;
}
#c1 {
background: white;
}
</style>
<canvas id="c1" width="400" height="400">
</canvas>
<script>
var oC = document.getElementById("c1");
//获取绘制2d 图像的环境。
var oCanvas = oC.getContext("2d");
oCanvas.fillRect(100,100,100,100);
//左边距 上边距 ，矩形宽 和高。
oCanvas.strokeRect(100,250,100,100);
</script>
fillRect()表示填充图像，
strokeRect()表示描边图像
<style>
body {
background: black;
}
#c1 {
background: white;
}
</style>
<canvas id="c1" width="400" height="400">
</canvas>
<script>
var oC = document.getElementById(‘c1‘);
var oGC = oC.getContext(‘2d‘);oGC.fillStyle = ‘yellow‘;
oGC.lineJoin = "bevel"; //绘制线的图形，而不是填充的图形
// miter(默认) 、round(圆角)、bevel(斜角)oGC.fillRect(100,100,200,100);
oGC.strokeStyle = ‘blue‘;
oGC.lineWidth = 10;
oGC.strokeRect(100,250,100,100);
</script>
fillStyle和strokeStyle设置图像的颜色
lineWidth设置描边的边框宽度
lineJoin : 边界连接点样式
miter(默认) 、round(圆角)、bevel(斜角)
<style>
body {
background: black;
}
#c1 {
background: white;
}
</style>
<canvas id="c1" width="400" height="400">
</canvas>
<script>
var oC = document.getElementById(‘c1‘);
var oGC = oC.getContext(‘2d‘);oGC.strokeStyle = ‘red‘;
oGC.fillStyle = "blue";
oGC.lineWidth = 1;
oGC.beginPath(); //开始绘制路径
oGC.moveTo(100,100); //设置一个初始点
oGC.lineTo(200,200); //下一个目标点
oGC.lineTo(200,300); //
oGC.closePath();
oGC.fill(); //填充颜色oGC.beginPath();
oGC.moveTo(300,300);
oGC.lineTo(300,350);
oGC.lineTo(350,200);
oGC.closePath(); //帮助闭合路径
oGC.stroke(); //划线连接
//清除画布某个区域
// oGC.clearRect(100,100,100,200);
beginPath : 开始绘制路径
closePath : 结束绘制路径（自动闭合相关路径） closePath()要在stroke 前调用
moveTo : 确定绘制的起始点
lineTo : 绘制路径到新的目标点
stroke : 画线，默认黑色
fill : 填充，默认黑色
clearRect : 清除一个画布的矩形区域
<style>
body {
background: black;
}
#c1 {
background: white;
}
</style>
<canvas id="c1" width="400" height="400">
</canvas>
<script>
var oC = document.getElementById(‘c1‘);
var oGC = oC.getContext(‘2d‘);/*1. 清除画布矩形区域(x , y, w,h)*/
//oGC.fillRect(50,50,100,100);
//oGC.clearRect(100,100,50,50);/*2. 清除整个画布*/
//oGC.clearRect(0,0,oC.width,oC.height);
/*3. save() and restore()*/
oGC.strokeStyle = ‘black‘;
oGC.lineWidth = ‘1‘;
oGC.save(); //保存上面的配置（属性值）;
oGC.strokeStyle = ‘red‘;
oGC.lineWidth = "20";
oGC.beginPath();
oGC.moveTo(100, 100);
oGC.lineTo(200, 200);
oGC.lineTo(300, 200);
oGC.closePath();
oGC.stroke();
oGC.restore(); //恢复上次保存的属性值。//如果不写save 和restore 就会填充红色的效果
oGC.save(); //保存上面的配置（属性值）;
oGC.strokeStyle = ‘blue‘;
oGC.lineWidth = "10";
oGC.beginPath();
oGC.moveTo(100, 200);
oGC.lineTo(200, 300);
oGC.lineTo(300, 300);
oGC.closePath();
oGC.stroke();
oGC.restore();oGC.beginPath();
oGC.moveTo(0, 0);
oGC.lineTo(100, 180);
oGC.lineTo(180, 180);
oGC.closePath();
oGC.stroke();
</script>
save : 保存路径
restore : 恢复路径
例子 : 鼠标画线 , 方块移动
实例：
1.鼠标划线
<style>
body {
background: black;
}
#c1 {
background: white;
}
</style>
<canvas id="c1" width="400" height="400">
</canvas>
<script>
var oC = document.getElementById(‘c1‘);
var oGC = oC.getContext(‘2d‘);
oGC.strokeStyle = "red";
//线帽
oGC.lineCap = "round";
oGC.lineWidth = "10";
oC.onmousedown = function(ev){
//确定划线的起始位置
oGC.beginPath();
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;//兼容滚动条
oGC.moveTo(ev.clientX-oC.offsetLeft+scrollLeft,ev.clientY-oC.offsetTop+scrollTop);
oC.onmousemove = function(ev){
oGC.lineTo(ev.clientX-oC.offsetLeft+scrollLeft,ev.clientY-oC.offsetTop+scrollTop);
oGC.stroke();
}
oC.onmouseup = function(){
oC.onmousemove = null;
oC.onmouseup = null;
}
}
2.方块水平移动
<style>
body {
background: black;
}
#c1 {
background: white;
}
</style>
<canvas id="c1" width="400" height="400" tabindex="0">
</canvas>
<script>
var oC = document.getElementById(‘c1‘);
var oGC = oC.getContext(‘2d‘);
oGC.fillStyle= "red";
oGC.fillRect(0, 0, 100, 100);
var iNow = 0;
// setInterval(function(){
// oGC.clearRect(0,0,400,400);
// iNow++;
// oGC.fillRect(0, iNow, 100, 100);
// },30);//canvas ”动画效果“， 边擦边画实现
//canvas本身 不支持键盘事件。
//支持键盘有两种方法：
// (1)给window 绑定键盘// (2)给canvas 加上一个tabindex 属性
var isRightNow = 0;
oC.onkeydown = function(ev){
console.log(ev);
if(ev.keyCode==39){
oGC.clearRect(0,0,400,400);
isRightNow++;
oGC.fillRect(isRightNow,0,100,100);
}else if(ev.keyCode==37){
oGC.clearRect(0,0,400,400);
isRightNow--;
oGC.fillRect(isRightNow,0,100,100);
}
}
</script>
arc(x, y, 半径, 起始弧度, 结束弧度, 旋转方向)
x , y : 起始位置
弧度与角度的关系：弧度 = 角度*Math.PI/180
旋转方向：顺时针(默认：false)、逆时针(true)
<style>
body {
background: black;
}
#c1 {
background: white;
}
</style>
<canvas id="c1" width="400" height="400"></canvas>
<script>
//弧度 = 角度*Math.PI/180
//默认 : 顺时针旋转 , 最后一个参数控制旋转方向 ：false顺时针，true就是逆时针（顺时针开始画还是逆时针开始画）var oC = document.getElementById(‘c1‘);
var oGC = oC.getContext(‘2d‘);
oGC.beginPath();oGC.arc(200, 200, 100, 0 * Math.PI / 180, 360 * Math.PI / 180,false);
oGC.closePath();
oGC.fill();
oGC.stroke();
</script>