前言

canvas是H5新增的一个特性,在IE9之后提供支持,说白了他就是一个标签,一个<canvas></canvas>标签,他是一个闭合标签。在IE9之前他只会被渲染成一个div。所以也存在着兼容问题。

canvas标签语法和属性

语法:

// canvas标签是闭合标签。
<canvas id="demo">
    
</canvas>

可以设置属性,

// canvas标签是闭合标签。
<canvas id="demo" width="600px" height="600px">
// canvas可以在标签上设置属性,可以添加类名等属性。
</canvas>

canvas可以设置行内样式,添加宽度高度等属性,但是单位必须是px,否则将不会被渲染。宽度和高度的默认值是300*150像素。

  • 注意:
  • 不要使用CSS样式控制其宽和高,
  • 重新设置canvas标签的宽高属性会让画布擦除所有内容。
  • 可以给canvas设置背景颜色。

兼容处理

<canvas id="demo">
    你的浏览器不支持canvas,请升级浏览器.
</canvas>
  • IE9以上才支持canvas,其他浏览器基本都支持。
  • canvas对移动端的兼容非常的理想。
  • 2d效果基本都支持。3d效果需要IE11以上才支持。
  • 当浏览器不支持时,canvas标签就是一个普通的div,所以直接以文字友好提示用户即可。
  • 如果浏览器不兼容,可以使用flash等手段进行优雅降级即可。

canvas绘图上下文

Context:是canvas的上下文、绘制环境。

  • 上下文的解释:是所有绘制操作api的入口或者集合。
  • canvas绘图实现是使用JavaScript操作的。
  • context对象就是JavaScript操作canvas的接口。
  • DOM.getcontext('2d')获取2D绘图上下文。

基本的绘制路径(坐标)

设置起点:moveTo(X,Y)

* 语法:ctx.moveTo(x, y);
* 解释:设置上下文绘制路径的起点。相当于移动画笔到某个位置
* 参数:x,y 都是相对于 canvas盒子的最左上角。
* 注意:**绘制线段前必须先设置起点。**

绘制直线lineTo(X,Y)

* 语法:ctx.lineTo(x, y);
* 解释:从x,y的位置绘制一条直线到起点或者上一个线头点。
* 参数:x,y 线头点坐标。

路径开始和闭合

* 开始路径:ctx.beginPath();
* 闭合路径:ctx.closePath();
* 解释:如果是绘制不同状态的线段或者形状,必须使用开始新路径的方法把不同的绘制操作隔开。闭合路径会自动把最后的线头和开始的线头连在一起。
* beginPath: 核心的作用是将 不同绘制的形状进行隔离,
  每次执行此方法,表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理。

描边

* 语法:ctx.stroke();
* 解释:根据路径绘制线。路径只是草稿,真正绘制线必须执行stroke
* stroke: (用笔等)画;

填充

* 语法:ctx.fill();
* 解释:填充,是将闭合的路径的内容填充具体的颜色。默认黑色。
<!--  步骤一:获取canvas标签-->
    var canvas = document.getElementById('demo');
    //    可以在canvas标签设置行内样式,也可以在js中设置样式
    canvas.width = 600;
    canvas.height = 600;
    //步骤二:拿到canvas的上下文
    var ctx = canvas.getContext("2d");
    //    设置初始起点,参数分别为x轴和y轴坐标。
    ctx.moveTo(100, 100);
    //    直线坐标
    ctx.lineTo(200, 100);
    ctx.lineTo(100, 200);
    //     闭合路径,回归初始起点
    ctx.lineTo(100, 100);
    ctx.closePath();
    //     在描边之前设置样式,
    ctx.strokeStyle = 'rgba(233,233,233,.8)';
    //      描边
    ctx.stroke();
    //    填充
    ctx.fill();

End

这就是简单基本的使用方法了。后面利用canvas还可以制作出很多东西呢,后面在慢慢摸索吧。

微信搜索噜噜科技

最后修改:2021 年 05 月 18 日 06 : 24 PM
本文作者:博主:    
文章标题:你还在用CSS写样式吗?试试canvas(画布)吧。
本文地址:https://www.iftiger.com/archives/95.html     
版权说明:若无注明,本文皆为“泰戈尔のBlog”原创,转载请保留文章出处。
如果觉得我的文章对你有用,可以对我进行您主观即不限定金额大小的打赏。