您的位置：首页 > 其它

canvas学习（二）

2014-02-04 22:16 337 查看

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;
width:800px;
height:300px;
}
</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 = '18px Arial';
context.fillStyle = 'cornflowerblue';

context.strokeStyle = 'green';
context.fillText('Hello Canvas1',canvas.width/2 - 111,
canvas.height/2 + 15);

context.font = '38px Arial';
context.strokeStyle = 'yellow';
context.strokeText('Hello Canvas22',canvas.width/2 - 150,
canvas.height/2 + 150);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航