HTML5 is Canvas

Posted 2020-06-17

var cvs = document.getElementById("cvs");
// // 获取上下文环境
var con = cvs.getContext("2d");
// // 新建一条路径
con.beginPath();
// // 设置线的颜色
con.strokeStyle = "pink";
// // 设置线宽
con.lineWidth = 5;
// // 从哪里开始画
con.moveTo(0,0);
// // 线到哪里去，X,Y
con.lineTo(100,100);
con.lineTo(0,100);
// // 填充颜色
con.fillStyle = "red";
// // 填充
con.fill();
// // 闭合路径
con.closePath();
// // 通过线条来绘制图形轮廓。
con.stroke();
// // ------------------矩形函数---------------------------//
con.beginPath();
// // 画一个填充矩形
con.fillRect(200,0,100,100);
// 清除画图指定区域
con.clearRect(210,10,80,80);
con.beginPath();
// 画一个边框矩形
con.strokeRect(350,0,100,100);
// 清除画图指定区域 让清除部分完全透明 如果是有边框的需要加上边框的值
con.clearRect(345,-5,110,110);
// ---------------------练习画三角形------------------------
--1--
con.beginPath();
con.moveTo(10,200);
con.lineTo(50,150);
con.lineTo(50,250);
con.closePath();
con.stroke();
--2--
con.beginPath();
con.moveTo(100,200);
con.lineTo(60,250);
con.lineTo(140,250);
con.closePath();
con.stroke();
---------------------圆弧------------------- //
con.beginPath();
// x，y，radius，起始位置，结束位置，Math.PI表示半个圆，Math.PI*2表示一个圆
con.arc(25, 25, 25, 0,Math.PI*0.8);
con.closePath();
con.stroke();
----------------------文本------------------- //
con.beginPath();
// 设置字体大小 必须写字体
con.font = "50px 微软雅黑";
// 设置字体对齐方式
con.textBaseline = "top";
// 绘制文本
con.strokeText("web qianduan",50,50);
----------------Images-------------------- //
var img = new Image();
img.src = "img.png";
img.width = 50;
img.height = 50;
var huo = {
x:0,
y:4,
stepX:0,
stepY:0,
isTrue:false
}
img.addEventListener("load",function(){
play(huo,con,img);
})

}
function play(huo,obj,img){
setInterval(function(){
huo.x = (huo.x+1)%8;
obj.clearRect(0,0,500,500);
obj.drawImage(img,
huo.x*256,huo.y*256,256,256,
huo.stepX,huo.stepY,256,256
)
huo.stepX+=8;
huo.isTrue?huo.stepY+=8:huo.stepY=0;
},100)
}