canvas学习笔记(一)
程序员文章站
2022-10-30 22:40:58
canvas是HTML5的新元素之一。使用canvas可以直接在HTML上进行图形操作,所以它具有极大的应用价值。canvas元素本身不具有绘图能力,它需要借助JavaScript来实现绘图功能。 canvas的限制: canvas绘制的图形是静态的,如果要让所画的图形动起来,则需要画出每一帧的图形 ......
canvas是HTML5的新元素之一。使用canvas可以直接在HTML上进行图形操作,所以它具有极大的应用价值。canvas元素本身不具有绘图能力,它需要借助JavaScript来实现绘图功能。
canvas的限制:
- canvas绘制的图形是静态的,如果要让所画的图形动起来,则需要画出每一帧的图形。
- 在使用canvas时,需要考虑用户的浏览器和使用环境。
- canvas目前只是一张二维画布,要想实现三维效果,需要借助第三方类库,如three.js或者Papervision3D等。
使用canvas,只需要在HTML5中添加canvas元素即可:
1 <canvas id="myCanvas" width="200" height="100"></canvas>
通过id获取canvas元素:
1 var canvas = document.getElementById("myCanvas");
获取CanvasRenderingContext2D对象(绘图对象):
1 var context = canvas.getContext("2d");
设置线条宽度:
1 context.lineWidth = 10;
设置线条颜色:
1 context.strokeStyle = "red"; 2 context.strokeStyle = "#ff0000"; 3 context.strokeStyle = "rgb(0,0,0)";
设置线帽样式:
1 context.lineCap = 'butt'; 2 context.lineCap = 'round'; 3 context.lineCap = 'square';
设置填充颜色:
1 context.fillStyle = "red"; 2 context.fillStyle = "#ff0000"; 3 context.fillStyle = "rgb(0,0,0)";
创建一个新的路径:
1 context.beginPath();
设置路径的起始点:
context.moveTo(x, y);
移动画笔至某坐标(产生路径):
context.lineTo(x, y);
绘制路径:
context.stroke();
绘制矩形:
context.strokeRect(x, y, w, h); // x,y 左上顶点坐标 // w 矩形宽度 // h 矩形长度
context.rect(x, y, w, h); //功能与context.strokeRect相同
绘制实心矩形:
1 context.fillRect(x, y, w, h);
画圆:
1 context.arc(x, y, r, b, e, bool); 2 // x,y 圆心坐标 3 // r 半径 4 // b 起始弧度 5 // e 终止弧度 6 // bool 是否逆时针绘制
注意:第4、5个参数传入的是圆弧的弧度,如果要画30度的角,则需将其转化为弧度:30*Math.PI/180。
画圆弧:
context.arcTo(P1x, P1y, p2x, p2y, r) // 当前点:P // 所绘制的圆弧与线段PP1、PP2相切 // 圆弧半径为: r
擦除canvas:
1 canvas.clearRect(x, y, w, h);
上一篇: Python爬虫_城市公交、地铁站点和线路数据采集实例
下一篇: 连接mongodb数据库的配置说明