HTML5 Canvas 开发绘图方法整理【一、需要了解的基础内容】

最新推荐文章于 2024-06-03 21:34:00 发布

freedom_文

最新推荐文章于 2024-06-03 21:34:00 发布

阅读量2.6k

点赞数

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

本文链接：https://blog.csdn.net/freedomVenly/article/details/79315362

版权

javascript 同时被 2 个专栏收录

49 篇文章 1 订阅

订阅专栏

canvas

22 篇文章 1 订阅

订阅专栏

先说一下提前需要准备的和需要知道的内容：

Canvas是一门纯JavaScript操作的技术，截止目前为止，暂时只支持到2D图形，
HTML5 主要的2个2D图形技术就是 Canvas 和 SVG ;
两者大致区别如下：
1、Canvas 是用JavaScript 操作动态生成的， SVG 则是使用XML静态描述生成的;
2、Canvas 基于位图简单来说就是图片放大会影响到显示的效果，造成不好的影响，SVG 基于矢量图图形放大不会影响到显示效果。
3、发生修改事件的时候，canvas必须重绘，SVG不需要。

以下网址有详细解说：
http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp

其实并一定Canvas 或 SVG 哪个更好，只是分别适用的场合不同，比如Canvas做应用程序或游戏的较多，SVG做大型的例如世界地图等较多。

需要声明的是：
Canvas 是一个行内块元素需要的属性一般是三个： id , width , height 。
width和height 在默认情况下分别是宽300px 高150px;
另外要注意一点！！！！！！！！！！！！！
虽然也可以在CSS中定义Canvas的宽和高，但是严重不建议使用，定义在CSS中的宽高在我们使用JS 操作Canvas时是获取不到的，获取的是默认存在的宽300 与高150，
而在实际开发中，这两个属性经常会被用到！！！！！！！！！！！！！！！

Canvas 是HTML5 后才有的，所以在兼容性上对于IE9以下的浏览器不兼容，实在需要兼容的话可以在页面顶部引入 excanvas.js 就行了

<!--[if IE]>

    <script src="excanvas.js"></script>

<![endif]-->

（看名字就知道是专门为低版本IE准备的 - -）;

不过这个虽然可以兼容，但是效果也不是很好，尤其一些功能也不能全部使用，并且Canvas必须是静态写在页面中的，通过JS创建的也不能用，所以不是很推荐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        #firstC{
            width:500px;
            height:300px;
            border:1px solid #ddd;
        }
    </style>
</head>
<body>


<canvas id="firstC" width="" height=""></canvas>



<script>

//    Canvas 开始绘制图形必先写的两句话：
    let cans=document.getElementById("firstC");   //1、获取Canvas对象
    let cxt=cans.getContext("2d");          //2、获取上下文环境对象

    console.log(cans.width);   //因为宽是设在CSS里的 所以即便已经定义了宽500， 但是控制台依然输出的是300

  //  3、开始绘制想要的图形


</script>
</body>
</html>

freedom_文

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas 开发绘图方法整理【一、需要了解的基础内容】

先说一下提前需要准备的和需要知道的内容：Canvas是一门纯JavaScript操作的技术，截止目前为止，暂时只支持到2D图形， HTML5 主要的2个2D图形技术就是 Canvas 和 SVG ; 两者大致区别如下： 1、Canvas 是用JavaScript 操作动态生成的， SVG 则是使用XML静态描述生成的; 2、Canvas 基于位...
复制链接

扫一扫