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

HTML5之Canvas画布属性--画直线、画三角、画矩形

2016-02-02 15:50 567 查看
画直线

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

</script>

<script>

window.onload=function(){

draw();

};

function draw(){

var canvas=document.getElementById("myCanvas");

var cxt=canvas.getContext("2d");

cxt.moveTo(20,20);

cxt.lineTo(20,90);

cxt.stroke(); 

<!-- 定义起始点、终点之后。两个点的话，就不需要开始和结束。stroke()画图 -->

画三角

cxt.beginPath();

cxt.moveTo(20,40);

cxt.lineTo(40,90);

cxt.lineTo(80,90);

cxt.closePath();

cxt.stroke(); 

<!-- 画三角，有3个点，开始画图，定义三个点的位置，moveto是起始点，结束画图，stroke()是连接这三个点 -->

画矩形
cxt.strokeRect(100,20,50,50);
<!-- strokeRect和fillRect这两个方法类似，前面一个是边框效果，后面一个是填充的效果 -->
<!-- fillRect()与strokeRect()是对双胞胎，fillRect方法绘制一个矩形并填充一种颜色，strokeRect方法绘制一个矩形并描边，也就是说矩形的轮廓有线条描边。 -->
context.fillRect(x, y, width, height);

}

</script>

</head>

<body><
4000
/div>

<canvas id="myCanvas" width="200" height="200"

 style="border:dotted 2px black">

sorry!your browser doesn't support Canvas.

</canvas>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Canvas画布属性
相关文章推荐
新的分享
章节导航