Canvas简介-- 简单画一条直线及基础api

女爷i 2023-03-06 05:20 7阅读 0赞

Canvas元素是H5新特性之一, 可以通过脚本渲染图像

以下摘自W3school:

> HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。  
>   
> 不过， 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。  
>   
> getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

简单用canvas画一个直线步骤:

1.  获取画布容器元素 (设置一个画布)
2.  获取canvas的工具集
3.  定位开始点  
    浏览器坐标系跟我们高中坐标系学的相反, 屏幕左上角为原点, X轴向右, Y轴向下.
4.  定位终点, 产生线段 (线段并未显示)
5.  绘制线条

<body> 
        
        <canvas id="pic" style="background-color: antiquewhite;"></canvas>
    
        <script type="text/javascript"> // 2. 获取画布元素 const pic = document.getElementById("pic"); // 3. 获取工具集 const pic_tools = pic.getContext("2d"); // 4. 定位开始点坐标 pic_tools.moveTo(60,60) // 5. 定位结束点坐标 (此时已产生直线, 但未渲染) pic_tools.lineTo(190,60) // 6. 绘制线条 pic_tools.stroke() </script>
    </body>

屏幕上效果  
![在这里插入图片描述][20200805160030259.JPG]

--------------------

**改变线条颜色**:

pic_tools.strokeStyle = 'red'  // 变成红色线条

**改变线条宽度**:

pic_tools.lineWidth = 10  // 变成10的宽度

--------------------

其他的几个基础绘制API

**文字绘制**

pic_tools.fillText('嘿嘿', 50, 50)   // 在50,50坐标上写嘿嘿
    // 或者
    pic_tools.strokeText('嘿嘿', 100, 100)  // 上面的是填充样式, 下面的是描边

**文字样式设置**

pic_tools.font = 'bold 50px'   // 在50,50坐标上写嘿嘿