[HTML5] Canvas绘制简单形状

使用canvas来进行绘画，它像很多其他dom对象一样，有很多属性和方法，操作这些方法，实现绘画

获取canvas对象，调用document.getElementById()方法

调用canvas对象的getContext()方法，获取context对象，参数：String的”2d”

 

绘制线段

调用context对象的moveTo()方法，把起点位置定义好，参数：x，y

调用context对象的lineTo()方法，把终点位置定义好，参数：x，y

调用context对象的stroke()方法，画一条线

如果不调用moveTo()方法，起点的位置是上次的点

 

绘制矩形

调用context对象的fillRect()方法，填充矩形，参数：起点横坐标，起点纵坐标，宽度，高度

调用context对象strokeRect()方法，边框矩形，参数：起点横坐标，起点纵坐标，宽度，高度

 

例如：context.fillRect(0,0,100,100); 会画出一个黑色的矩形

注意：html5 canvas fillRect坐标和大小一直不对，是因为canvas的宽度和高度必须内联在canvas标签中才对

 

绘制扇形

调用context对象的beginPath()方法，开启路径

调用context对象的moveTo()方法，把路径移动到圆心位置，参数：x，y

调用context对象的arc()方法，绘制圆弧，参数：圆心x坐标，圆心y坐标，开始角度，结束角度

调用context对象的closePath()方法，关闭路径

调用context对象的fill()方法，填充颜色

 

绘制贝塞尔曲线

调用context对象的bezierCurveTo()方法，绘制曲线路径，

参数：第一控制点x，第一控制点y，

           第二控制点x，第二控制点y，

           最终控制点x，最终控制点y

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试canvas</title>
</head>
<body>
<canvas id="myCanvas" width="500px" height="1000px"></canvas>
<script>
    var canvas=document.getElementById('myCanvas');
    var context=canvas.getContext("2d");

    //绘制矩形
    context.fillRect(0,0,100,100);
    context.strokeRect(120,0,100,100);

    //绘制扇形
    context.beginPath();
    context.moveTo(50,220);
    context.arc(50,220,50,0,Math.PI/4);
    context.closePath();
    context.fill();

    //绘制线段
    context.moveTo(0,300);
    context.lineTo(100,300);
    context.lineTo(100,400);
    context.stroke();

    //绘制贝塞尔曲线
    context.moveTo(200,300);
    context.bezierCurveTo(200,300,250,300,300,400);
    context.stroke();
</script>
</body>
</html>

 

posted @ 2016-05-11 15:11  唯一客服系统开发笔记  阅读(1115)  评论(0)  编辑  收藏  举报