html5 canvas代码,HTML5 is Canvas(示例代码)

简介这篇文章主要介绍了HTML5 is Canvas(示例代码)以及相关的经验技巧，文章约2377字，浏览量382，点赞数8，值得推荐！

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)

}