canvas学习

 

 

<canvas height="200px" width="300px">
对不起，您的浏览器版本太低，无法显示画布，请升级您的浏览器。
</canvas>

View Code

在canvas标签中使用height和width与在CSS中为canvas使用长宽属性的区别：
       在canvas标签中使用长宽，会在canvas创建的时候就指定对应的长宽，而在CSS中指定长宽是先创建一个默认大小的canvas（300*150），然后再在这个基础上变大（或缩小）成你在CSS中写的长宽，这样的话就会使你的画布看起来很不自然。

测试浏览器是否兼容canvas属性：

1、如果浏览器遇到一个它不认识的标签的时候，它会跳过这个标签直接显示在标签中的文字，如上面的代码

2、得到canvas的引用，再用if（canvas.getcontext）进行判断  其中canvas.getcontext（“2d”）是请求画布提供一个可供绘制上下文（context）此处为2d的上下文

fillStyle设置颜色/渐进/图之后，之后填充，渐进，或图都是用之前设置的那个

canvas api 可参照此网站 http://javascript.ruanyifeng.com/htmlapi/canvas.html#

 

转载于:https://www.cnblogs.com/Angel520/p/3565283.html