您的位置：首页 > 其它

canvas（11/28）--------基础入门

2017-11-29 10:45 162 查看

canvas的基础使用

html上的代码：

<html>
<head>
<title>michelleswan</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 = '38px Arial';
context.fillStyle = 'cornflowerblue';
context.strokeStyle = 'blue';
context.fillText('Hello Cancas',canvas.width/2-150,canvas.height/2+15);
context.strokeText('hello canvas',canvas.width/2-150,canvas.height/2+15);

canvas状态的保存与恢复：

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

标签：

相关文章推荐

新的分享

章节导航