如何使用html5中的canvas标签,画一个圆及一个矩形

发布网友

我来回答

1个回答

热心网友

1、canvas绘制矩形

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas绘制矩形</title>
    <script type="text/javascript" src="canvas2.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

js:

/**
 * Created by winson on 2016/9/11.
 */
function draw(id) {
    var canvas = document.getElementById(id);//用getElementById获取到canvas对象
    var context = canvas.getContext('2d');//取得上下文
    context.fillStyle = "green";//绘制背景的颜色
    context.strokeStyle = "#fff";//绘制边框的颜色
    context.lineWidth = 5; //设置画笔宽度
    context.fillRect(0, 0, 400, 300);//绘制
    context.strokeRect(50, 50, 180, 120);
}

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com