（17）HTML5-Canvas画布基础绘图

最新推荐文章于 2022-02-18 14:31:22 发布

梧桐下的四叶草

最新推荐文章于 2022-02-18 14:31:22 发布

阅读量967

点赞数 1

分类专栏： HTML5 文章标签： javascript html5

本文链接：https://blog.csdn.net/zsc2014030403015/article/details/52413640

版权

在HTML中须用一组<canvas>与</canvas>标签定义画布的范围，与其它标签一样，<canvas>元素可以设置id，width，height，bgcolor等属性，在没有特别设置的情况下，画布宽的默认值为300pixels，高的默认值为150pixels，背景透明。

由于<canvas>标签是非常新的元素，所以目前还有可能会遇到部分浏览器不支持的情况（例如IE9之前的版本）。因此可以安插一个“错误替代内容”在<canvas>与</canvas>之间，当画布元素没有办法正常显示时，就会显示错误替代信息.

<!DOCTYPE html>
 <head>
     <meta charset="utf-8"/>
     <script>
    </script>
 </head>
 <body>
    <canvas id="tutorial">浏览器不支持画布功能</canvas>
 </body>
</html>

在HTML中我们使用<canvas>标签产生一个固定大小的画布，但是要在这个画布区里面绘制和操作图形，需要先定义渲染环境（rendering context）以及获取绘图函数（function），才能在画布区绘制并显示影像。所谓的渲染环境指的是要先告诉画布当前使用2D或3D的绘图环境，可以通过javascript方法getContext（）来指定渲染环境。

<!DOCTYPE html>
 <head>
     <meta charset="utf-8"/>
     <script>
     var canvas=document.getElementById('tutorial');
     var ctx = canvas.getContext('2d');
    </script>
 </head>
 <body>
    <canvas id="tutorial">浏览器不支持画布功能</canvas>
 </bod

最低0.47元/天解锁文章

梧桐下的四叶草

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（17）HTML5-Canvas画布基础绘图

在HTML中须用一组与标签定义画布的范围，与其它标签一样，元素可以设置id，width，height，bgcolor等属性，在没有特别设置的情况下，画布宽的默认值为300pixels，高的默认值为150pixels，背景透明。由于标签是非常新的元素，所以目前还有可能会遇到部分浏览器不支持的情况（例如IE9之前的版本）。因此可以安插一个“错误替代内容”在与之间，当画布元素没有办法正常显示时，就会
复制链接

扫一扫

专栏目录