Hello Canvas

最新推荐文章于 2019-05-08 11:09:28 发布

编码的三叔

最新推荐文章于 2019-05-08 11:09:28 发布

阅读量210

点赞数

分类专栏： html5 canvas 文章标签： html5 canvas

本文链接：https://blog.csdn.net/ppwwp/article/details/79954972

版权

html5 canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>  a simple canvas</title>

        <style>
            body{
                background: #dddddd;
            }               
            #canvas{
                margin: 10px;
                padding: 10px;
                background: #ffffff;
                border: thin inset  #aaaaaa;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="600" height="300">
            canvas not supported
        </canvas>
        <script src='example.js'></script>
    </body>
</html>

EXAMPLE.JS

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

context.font = '38pt Arial';
context.fillStyle = 'cornflowerblue';
context.strokeStyle = 'blue';

context.fillText('Hello Canvas',canvas.width/2-150,
                                canvas.height/2+15);
context.strokeText('Hello Canvas',canvas.width/2-150,
                                canvas.height/2+15);

页面效果

这里写图片描述

修改js

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

context.font = '38pt Arial';
context.fillStyle = 'cornflowerblue';
context.strokeStyle = 'blue';

context.fillText('Hello Canvas',canvas.width/2-150,
                                canvas.height/2+15);

context.strokeText('Hello Canvas',canvas.width/2-15,
                                canvas.height/2-15);