HTML5 Canvas笔记——打印出Hello Canvas

2020-04-07 本文已影响0人没昔

参考书目：《HTML5 Canvas核心技术图形、动画与游戏开发》

HTML5 Canvas简单入门操作，如同每个语言习惯输入hello world一样，来打印出Hello Canvas吧！

1-1.html
<!DOCTYPE html>

<html>

<head>

<title>A Simple Canvas Example</title>

<style>

body{

background: #dddddd;

}

#canvas{

margin: 10px;

padding: 10px;

background: #ffffff;

border: thin inset #aaaaaa;

}

</style>

</head>

<body>

Canvas not supported

</canvas>

</body>

</html>

1-2.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);

运行结果：