Hello Canvas

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);

页面效果
这里写图片描述

阅读更多
文章标签: html5 canvas
个人分类: html5 canvas
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭