HTML5 is Canvas

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)
}

巴特西

HTML5 is Canvas

最新文章

热门文章