使用canvas绘制矩形及属性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_20725287/article/details/45482291

绘制简单的矩形

一;这里canvas 提供里矩形绘制的三个方法

用于清除内容：clearRect(x,y,width,height)

描边：strokeRect(x,y,width,height)

填充:fillRect(x,y,,width,height)

二：strokeRect()的一些属性

lineJoin,指定矩形边角的形状：这一属性的默认值是 "miter"，它说明了两条线段的外边缘一直扩展到它们相交。当两条线段以一个锐角相交，斜角连接可能变得很长。 miterLimit 属性为一个斜面的长度设置了上限。超过这一限制，斜面就变成斜角了。值 "round" 说明定点的外边缘应该和一个填充的弧接合，这个弧的直径等于线段的宽度。"bevel" 值说明顶点的外边缘应该和一个填充的三角形相交。

lineWidth,：指定矩形边的宽度

strokeStyle：指定边的颜色

三：示例：

html代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #dddddd;
        }
        #canvas1{
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <canvas id="canvas1" width="700" height="450">
        canvas is not support!
    </canvas>
    <script src="绘制简单的矩形.js"></script>
</body>
</html>

js代码：

/**
 * Created by Administrator on 2015/5/2.
 */
var  canvas = document.getElementById('canvas1');
context = canvas.getContext('2d');


context.font = '20px Helvetica';
context.fillText('click here ro erase',30,400);
// context.strokeStyle = 'blue';
context.fillText('不加属性的绘制',20,20);
context.strokeRect(30,30,50,50);
context.fillText('加lineWidth',20,100);
context.lineWidth = 10;
context.strokeRect(20,120,50,50);
context.fillText('加lineJion',20,190);
context.lineJoin = 'round';
context.strokeRect(20,200,50,50);
context.fillText('fillRect',20,280);
context.fillRect(20,300,50,50);
context.canvas.onclick = function(e){

    context.clearRect(0,0,canvas.width,canvas.height);
};

结果如图