绘制Canvas并在里面写上HelloCanvas--学习Canvas第一章

最新推荐文章于 2020-06-05 12:02:38 发布

RisaSama

最新推荐文章于 2020-06-05 12:02:38 发布

阅读量151

点赞数

分类专栏：网页学习文章标签： html JavaScript

本文链接：https://blog.csdn.net/RisaSama/article/details/89947935

版权

网页学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

首先我们先来看效果图，初次学习记录成长。
图中的应用程序是非常简单的，直接上代码

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 id='canvas' width='600' height='300'>
		Canvas not supported
	</canvas>
	<script src='js/example.js'></script>
</body>
</html>

JavaScript的代码

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

JavaScript中的代码采用了一个诀窍，在开发基于Canvas的应用程序中，可以这样做：
① 使用document.getElementById()方法来获取canvas的引用。
② 在canvas对象上调用getContext(‘2d’)方法，获取绘图环境变量。
③ 使用绘图环境对象在canvas元素上进行绘制。

详情W3SCHOOL

RisaSama

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
绘制Canvas并在里面写上HelloCanvas--学习Canvas第一章

首先我们先来看效果图，初次学习记录成长。图中的应用程序是非常简单的，直接上代码HTML的代码<!DOCTYPE html><html><head> <title>A Simple Canvas Example</title> <style> body{ background: #dddddd; }...
复制链接

扫一扫