利用canvas绘制一个矩形

下面展示一些 内联代码片

// A code block
var foo = 'bar';
// An highlighted block
var foo = 'bar';
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas矩形绘制</title>
    <script type="text/javascript" src ="canvas矩形.js"></script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

首先使用webstrom创建一个HTML文件输入如上代码计可创建出一个400*300的画布,然后再创建出一个js文件进行绘图。在js中定义draw函数进行绘制矩形的操作。draw函数定义如下:

// A code block
var foo = 'bar';
// An highlighted block
var foo = 'bar';
function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    context.fillStyle = "#000";
    context.strokeStyle = "#f60";
    context.lineWidth = 5;
    context.fillRect(0,0,400,300);
    context.strokeRect(50,50,180,120)
    context.strokeRect(110,110,180,120)
}

最后得到的矩形如下图所示利用canvas绘制一个矩形_第1张图片

你可能感兴趣的:(利用canvas绘制一个矩形)