写canvas程序的格式规范以及一些注意事项

最新推荐文章于 2023-09-08 18:14:14 发布

黑发

最新推荐文章于 2023-09-08 18:14:14 发布

阅读量854

点赞数

分类专栏： html canvas核心技术学习笔记文章标签： canvas html5 实例 css js

本文链接：https://blog.csdn.net/qq_20725287/article/details/45251829

版权

html canvas核心技术学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

html5 canvas规范格式如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #mycanvas{
            background-color: #dddddd;
            width: 600px;
            height: 600px;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas">
        canvas is not support
    </canvas>
    <script src="hellocanvas.js"></script>
</body>
</html>

js文本hellocanvas.js:

var canvas = document.getElementById("mycanvas");
context = canvas.getContext("2d");

了解事项

	1，canvas的高和宽度只能用非负整数表示，不能带px；

	2，在 canvas 标签设置的大小和在css样式中设canvas的大小是不一样的。

		前者是绘图的内容（表面大小），也就是当你在canvas中添加一hello canvas的字体图像，当你在此标签改变宽和高，其字体大小看起来是没变化的

实例如下；当width,height都为400时

当width,height都为600时:

hello canvas的大小是看不到变化的。。

而后者与之相反，hello canvas的字体会有放大的效果

黑发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
写canvas程序的格式规范以及一些注意事项

html5 canvas规范格式如下html>html>head lang="en"> meta charset="UTF-8"> title>title> style> *{ margin: 0; padding: 0; } #mycanvas{
复制链接

扫一扫

专栏目录