【HTML5】canvas画布练习

第一步：获取画布元素

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

第二步：绘制

1.正方形

function drawSquare(canvas, context) {
        var width = Math.floor(Math.random() * 64);

        var x = Math.floor(Math.random() * (canvas.width-width));
        var y = Math.floor(Math.random() * (canvas.height-width));

        context.fillStyle = "lightblue";
        console.log(x);
        console.log(y);
        console.log(width);
        context.fillRect(x, y, width, width);
    }

2.圆形

function drawSquare(canvas, context) {
        var width = Math.floor(Math.random() * 64);

        var x = Math.floor(Math.random() * (canvas.width-width));
        var y = Math.floor(Math.random() * (canvas.height-width));

        context.fillStyle = "lightblue";
        console.log(x);
        console.log(y);
        console.log(width);
        context.fillRect(x, y, width, width);
    }

3.文字

function drawText(canvas, context) {
        var selectObj = document.getElementById("foregroundColor");
        var index = selectObj.selectedIndex;
        var fgColor = selectObj[index].value;
        var fontSize = "24";

        context.fillStyle = fgColor;
        context.font = "bold " + fontSize + "px sans-serif";
        context.textAlign = "center";

        var message = document.getElementById("message").value;
        var x = Math.floor(canvas.width / 2);
        var y = Math.floor(canvas.height / 2 - fontSize / 2);
        context.fillText(message, x, y);
    }

备注：context.textAlign是设置 fillText() 中 x 坐标指定的是文本哪个部位的坐标，如果设置为 center， x 就是文本中间的 x 坐标。

4.将画布内容变为图片

function makeImage() {
        var canvas = document.getElementById("myCanvas");
        canvas.onclick = function() {
            window.location = canvas.toDataURL("image/png");
        }
    }

这部分功能浏览器支持得不够好。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        *{
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        main {
            width: 640px;
            height: 320px;
            margin: 32px auto;
            text-align: center;
        }
        canvas {
            border: 1px solid #ccc;
        }
        form section {
            margin-bottom: 16px;
        }
    </style>
</head>
<body>
<main>
    <canvas width="640" height="320" id="myCanvas"></canvas>
    <form>
        <section>
            <label for="backgroundColor">Select background :</label>
            <select id="backgroundColor">
                <option value="white" selected>White</option>
                <option value="black">Black</option>
            </select>
        </section>
        <section>
            <label for="foregroundColor">Select ForegroundColor:</label>
            <select id="foregroundColor">
                <option value="white">White</option>
                <option value="black" selected>Black</option>
            </select>
        </section>
        <section>
            <label for="shape">Select shape:</label>
            <select id="shape">
                <option value="circles" selected>Circles</option>
                <option value="squares">Squares</option>
            </select>
        </section>
        <section>
            <label for="message">Input text:</label>
            <input type="text" name="message" id="message" maxlength="48">
        </section>
        <input type="button" value="preview" id="previewButton" onclick="draw(canvas, context);">
    </form>
</main>
<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    function drawSquare(canvas, context) {
        var width = Math.floor(Math.random() * 64);

        var x = Math.floor(Math.random() * (canvas.width-width));
        var y = Math.floor(Math.random() * (canvas.height-width));

        context.fillStyle = "lightblue";
        console.log(x);
        console.log(y);
        console.log(width);
        context.fillRect(x, y, width, width);
    }
    function drawCircle(canvas, context) {
        var radius = Math.floor(Math.random() * 48);

        var x = Math.floor(Math.random() * canvas.width);
        var y = Math.floor(Math.random() * canvas.height);

        context.beginPath();
        context.arc(x, y, radius, 0, Math.PI * 2, true);
        context.fillStyle = "lightblue";
        context.fill();
    }
    function drawText(canvas, context) {
        var selectObj = document.getElementById("foregroundColor");
        var index = selectObj.selectedIndex;
        var fgColor = selectObj[index].value;
        var fontSize = "24";

        context.fillStyle = fgColor;
        context.font = "bold " + fontSize + "px sans-serif";
        context.textAlign = "center";

        var message = document.getElementById("message").value;
        var x = Math.floor(canvas.width / 2);
        var y = Math.floor(canvas.height / 2 - fontSize / 2);
        context.fillText(message, x, y);
    }
    function makeImage() {
        var canvas = document.getElementById("myCanvas");
        canvas.onclick = function() {
            window.location = canvas.toDataURL("image/png");
        }
    }
    function draw(canvas, context) {
        drawText(canvas, context);
        makeImage();
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
*{
            -moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
        main {
            width: 640px;
height: 320px;
margin: 32px auto;
text-align: center;
}
        canvas {
            border: 1px solid #ccc;
}
        form section {
            margin-bottom: 16px;
}
    </style>
</head>
<body>
<main>
    <canvas width="640" height="320" id="myCanvas"></canvas>
    <form>
        <section>
            <label for="backgroundColor">Select background :</label>
            <select id="backgroundColor">
                <option value="white" selected>White</option>
                <option value="black">Black</option>
            </select>
        </section>
        <section>
            <label for="foregroundColor">Select ForegroundColor:</label>
            <select id="foregroundColor">
                <option value="white">White</option>
                <option value="black" selected>Black</option>
            </select>
        </section>
        <section>
            <label for="shape">Select shape:</label>
            <select id="shape">
                <option value="circles" selected>Circles</option>
                <option value="squares">Squares</option>
            </select>
        </section>
        <section>
            <label for="message">Input text:</label>
            <input type="text" name="message" id="message" maxlength="48">
        </section>
        <input type="button" value="preview" id="previewButton" onclick="draw(canvas, context);">
    </form>
</main>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
function drawSquare(canvas, context) {
        var width = Math.floor(Math.random() * 64);

var x = Math.floor(Math.random() * (canvas.width-width));
var y = Math.floor(Math.random() * (canvas.height-width));

context.fillStyle = "lightblue";
console.log(x);
console.log(y);
console.log(width);
context.fillRect(x, y, width, width);
}
    function drawCircle(canvas, context) {
        var radius = Math.floor(Math.random() * 48);

var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);

context.beginPath();
context.arc(x, y, radius, 0, Math.PI * 2, true);
context.fillStyle = "lightblue";
context.fill();
}
    function drawText(canvas, context) {
        var selectObj = document.getElementById("foregroundColor");
var index = selectObj.selectedIndex;
var fgColor = selectObj[index].value;
var fontSize = "24";

context.fillStyle = fgColor;
context.font = "bold " + fontSize + "px sans-serif";
context.textAlign = "center";

var message = document.getElementById("message").value;
var x = Math.floor(canvas.width / 2);
var y = Math.floor(canvas.height / 2 - fontSize / 2);
context.fillText(message, x, y);
}
    function makeImage() {
        var canvas = document.getElementById("myCanvas");
canvas.onclick = function() {
            window.location = canvas.toDataURL("image/png");
}
    }
    function draw(canvas, context) {
        drawText(canvas, context);
makeImage();
}
</script>
</body>
</html>

posted on 2016-12-23 14:27 Hector_E 阅读(330) 评论(0) 收藏举报

刷新页面返回顶部

_,_h

【HTML5】canvas画布练习

公告

导航

_____,_____h

【HTML5】canvas画布练习

公告

导航

_,_h