学习Canvas技术

m0_75011249

于 2024-05-09 13:16:27 发布

阅读量225

点赞数 3

分类专栏：程序员文章标签：学习

本文链接：https://blog.csdn.net/m0_75011249/article/details/138610137

版权

程序员专栏收录该内容

175 篇文章 1 订阅

订阅专栏

2.1、创建canvas元素

2.2、画线

2.3、路径与closePath，beginPath,fill

2.3、绘制矩形

🔴一、什么是canvas

标签是 HTML5 中的新标签，像所有的 dom 对象一样它有自己本身的属性、方法和事件。操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。

标记和 SVG以及 VML 之间的一个重要的不同是，有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些。

注意：Internet Explorer 8 以及更早的版本不支持标签。Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持标签。

🔴二、创建使用canvas元素

2.1、创建canvas元素


<canvas id="can" width="800"  height="600">不支持Canvas</canvas>

以上代码创建了一个宽度为800像素，高度为600像素的canvas。不建议使用CSS样式指定宽度和高度。

canvas标签中间的内容为替代显示内容，当浏览器不支持canvas标签时会显示出来。

创建了canvas元素后，要在canvas元素上面绘制图象，首先必须获取canvas环境上下文：

语法：

canvas.getContext(画布上绘制的类型)
2d：表示2维
experimental-webgl：表示试验版3维
webgl：表示3维

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字


 <canvas id="canvas1" width="800" height="600"></canvas>

        <script type="text/javascript">

           //获得画布元素

            var canvas1=document.getElementById("canvas1");

            //获得2维绘图的上下文

            var ctx=canvas1.getContext("2d");

            

            //设置线宽

            ctx.lineWidth=10;

            //设置线的颜色

            ctx.strokeStyle="blue";

            

            //将画笔移动到00点

            ctx.moveTo(0,0);

            //画线到800，600的坐标

            ctx.lineTo(800,600);

            

            //执行画线

            ctx.stroke();

        </script>

2.2、画线

.moveTo(x坐标 , y坐标) 把画笔移动到x,y坐标，建立新的子路径。

.lineTo(x坐标 , y坐标) 建立上一个点到x,y坐标的直线，如果没有上一个点，则等同于moveTo(x,y)，把（x,y）添加到子路径中。顾名思义，就是画一条直线到某个点，很好理解。

.stroke() 描边方法描绘子路径


<script>

var c = document.getElementById("myCanvas");



var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象



ctx.moveTo(0,0);   //咱把“画笔”移到坐标(0,0)



ctx.lineTo(150,50);  //从上个点(0,0)画一条直线，结束点坐标是(150,50)



ctx.lineTo(20,100);  //从上个点(150,50)继续画一条直线，结束点坐标是(20,100)



ctx.moveTo(90,90);   //咱把“画笔”移到坐标(90,90)





ctx.strokeStyle = "red";    //设定描边颜色为红色，只要写在.stroke()方法前面即可



ctx.stroke();  //描边



</script>