您的位置：首页 > Web前端 > HTML5

html5之canvas标签应用之 2d图形绘制以及图片绘制

2014-12-11 23:37 731 查看



<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>

<canvas style="border: 1px solid red" width="400px" height="400px" id="can1">

</canvas>
<script type="text/javascript">

//1得到画布
var canvas1 = document.getElementById("can1");
//2得到上下文引用  画笔
var cxt =  canvas1.getContext("2d")
//3画出直线
cxt.moveTo(20,20);
cxt.lineTo(20,90);
//画出直线
cxt.stroke();

/****画出一个填充的三角形--->路径****/
//开始新路径
cxt.beginPath();
cxt.moveTo(40,20);
cxt.lineTo(40,90);
cxt.lineTo(80,90);
//闭合路径   画了三个点  闭合起来  连起来
cxt.closePath();
cxt.fill();//实心的
//cxt.stroke();//空心的

/**画出矩形**/
cxt.strokeRect(100,20,70,70);//空心矩形
//改变画笔的style
cxt.fillStyle="red";
cxt.fillRect(200,20,70,70);//实心的矩形

/**画出圆形**/
cxt.fillStyle="blue"
cxt.beginPath();
cxt.arc(270,40,20,0,360,true);
cxt.closePath();
// cxt.stroke();
cxt.fill();

/**画出图片**/
//1创建image对象
var img1 = new Image();
img1.src="apple-touch-icon-precomposed.png";
//加载完毕后再绘制图形
img1.onload=function(){
cxt.drawImage(img1,20,100,200,150);
}

</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航