Canvas的基础知识

最新推荐文章于 2024-05-29 09:40:33 发布

珊瑚贝

最新推荐文章于 2024-05-29 09:40:33 发布

阅读量192

点赞数

分类专栏：编程开发

本文链接：https://blog.csdn.net/chenzhao635/article/details/104128782

版权

编程开发专栏收录该内容

46 篇文章 0 订阅

订阅专栏

Canvas元素是HTML5中新增的一个重要元素，专门用来绘制图
形。在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。
语法格式：

<canvas></canvas>

注意，在canvas元素里进行绘画，并不是指拿鼠标来作画。在网页上使用canvas元素时，它会创建一块矩形区域。默认情况下该矩形区域宽为300像素，高为150像素，用户可以自定义具体的大小或者设置canvas元素的其他特性。在页面中加入了canvas元素后，我们便可以通过JavaScript来自由地控制它。可以在其中添加图片、线条以及文字，也可以在里面绘图，甚至还可以加入高级动画。

简单的例子：

<!DOCTYPE html>   
<head>   
<meta charset="UTF-8">  
<title>canvas中的对角线示例</title>  
</head>  
<body>  
<canvas id="djx" style="border: 1px solid;"  width="200" height="200"> </canvas>
<script>
        function drawDiagonal() {
            // 取得canvas元素及其绘图的上下文
            var canvas = document.getElementById('djx');
            var context = canvas.getContext('2d');

            // 用绝对坐标来创建一条路径
            context.beginPath();
            context.moveTo(70, 140);
            context.lineTo(140, 70);

            // 将这条线绘制到canvas上
            context.stroke();
        }
        window.addEventListener("load", drawDiagonal, true);
  </script>
</body>  
</html>

效果如下：

珊瑚贝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas的基础知识

Canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。语法格式：<canvas></canvas>注意，在canvas元素里进行绘画，并不是指拿鼠标来作画。在网页上使用canvas元素时，它会创建一块矩形区域。默认情况下该矩形区域宽为300像素，高为150...
复制链接

扫一扫