用百度地图 做gis网站抖音广告推广怎么收费
canvas
- 一、使用vuepress搭建docs
- 二、介绍
- 1.H5新增特性
- 2.创建canvas元素
- 3.通过JavaScript来绘制
- 三、基本使用
- 1.基本使用
- 1.绘制线段和三角形
- 2.绘制矩形
- 3.绘制圆形
- 4.清除画布和绘制文字
- 四、案例---绘制柱状图
一、使用vuepress搭建docs
二、介绍
1.H5新增特性
- HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像
- 画布是一个矩形区域，您可以控制其每一像素。
- canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
2.创建canvas元素
向 HTML5 页面添加 canvas 元素。
必须规定元素的 id、宽度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>
3.通过JavaScript来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作
必须在 JavaScript 内部完成
- JavaScript
使用 id 来寻找 canvas 元素；- 然后，使用
getContext()获取canvas上下文环境
- getContext(“2d”)对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
- 目前参数只有2d不支持3d
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
三、基本使用
1.基本使用
<body><!-- canvas有默认宽高 300*150--><canvas></canvas>
</body>
鼠标右键，可以看到浏览器把canvas看成是一张图片
canvas是标签，可以书写样式
- 想操作canvas画布：画布当中绘制图形、显示文字、必须通过js完成
- canvas的宽高务必通过canvas标签的属性width,height设置。不能通过样式设置。
<!-- --><!-- <canvas>我是小帅</canvas> --><!-- 书写内容没意义 --><canvas><!-- 添加子节点没意义 --><h1>我是小帅</h1></canvas><canvas width="600" heighr="400">我是小美</canvas> <style>* {margin: 0;padding: 0;}canvas {border: 1px solid #0a0a0a;}</style>
通过js操作
//通过js当中的"笔"去完成let canvas = document.querySelector('canvas');//获取canvas的上下文（笔）let ctx = canvas.getContext('2d');console.log(ctx);
1.绘制线段和三角形
//通过js当中的"笔"去完成let canvas = document.querySelector('canvas');//获取canvas的上下文（笔）let ctx = canvas.getContext('2d');console.log(ctx);//绘制线段ctx.moveTo(10, 10);//起点ctx.lineTo(100, 100);//其他点ctx.stroke();//画
//通过js当中的"笔"去完成let canvas = document.querySelector('canvas');//获取canvas的上下文（笔）let ctx = canvas.getContext('2d');console.log(ctx);//绘制线段ctx.moveTo(10, 10);//起点ctx.lineTo(100, 100);//其他点ctx.lineTo(10, 100);//其他点ctx.closePath();//连接起点终点ctx.stroke();//画
- 看到的三角形
不是一个DOM节点- 只有一个节点，那就是canvas标签
- 眼睛看到的实际是
由像素点组成的像素群
2.绘制矩形
let canvas = document.querySelector('canvas');let ctx = canvas.getContext('2d');ctx.strokeRect(100, 200, 100, 200);//（距离左边的距离，距离顶部的距离，矩形的宽度，矩形的高度）// 绘制矩形第一种方法// （距离左边的距离，距离顶部的距离，矩形的宽度，矩形的高度）// 绘制矩形第二种方法,带填充颜色，默认黑色，可以替换ctx.fillStyle = 'skyblue';ctx.fillRect(300, 200, 100, 200);ctx.fill();//填充的颜色务必放在绘制图形之前，否则不会填充
3.绘制圆形
let canvas = document.querySelector('canvas');let ctx = canvas.getContext('2d');//arc(x,y,r,start,stop,anticlockwise)//x,y为圆心坐标，r为半径，start为起始弧度，stop为终止弧度s,anticlockwise为是否逆时针绘制(true为逆时针)//360° = 2π 弧度（2*PI）//绘制一个圆ctx.beginPath();//开始绘制ctx.arc(100, 100, 50, 0, Math.PI * 2, true);ctx.stroke();//描边
4.清除画布和绘制文字
let canvas = document.querySelector('canvas');let ctx = canvas.getContext('2d');// 绘制一个矩形ctx.fillStyle = 'skyblue';ctx.fillRect(100, 200, 100, 200);// 清除画布 -整个画布// ctx.clearRect(0, 0, canvas.width, canvas.height);// 清除画布 -指定区域ctx.clearRect(100, 200, 50, 100);//绘制文字ctx.font = '20px 微软雅黑';ctx.fillStyle = 'black';ctx.fillText('数据可视化', 50, 20);
四、案例—绘制柱状图
let canvas = document.querySelector('canvas');let ctx = canvas.getContext('2d');ctx.font = '16px 微软雅黑';ctx.fillText('数据可视化', 50, 20);//绘制线段ctx.moveTo(100, 100);ctx.lineTo(100, 400);ctx.lineTo(700, 400);ctx.stroke();//绘制其他的线段ctx.moveTo(100, 100);ctx.lineTo(700, 100);ctx.fillText('150', 70, 110);ctx.moveTo(100, 160);ctx.lineTo(700, 160);ctx.fillText('120', 70, 170);ctx.moveTo(100, 220);ctx.lineTo(700, 220);ctx.fillText('90', 70, 230);ctx.moveTo(100, 280);ctx.lineTo(700, 280);ctx.fillText('60', 70, 290);ctx.moveTo(100, 340);ctx.lineTo(700, 340);ctx.fillText('30', 70, 350);ctx.fillText('0', 70, 400);ctx.stroke();//绘制水平轴底部线段ctx.moveTo(250, 400);ctx.lineTo(250, 410);//底部文字ctx.fillText('食品', 170, 415);ctx.moveTo(400, 400);ctx.lineTo(400, 410);//底部文字ctx.fillText('数码', 320, 415);ctx.moveTo(550, 400);ctx.lineTo(550, 410);//底部文字ctx.fillText('服饰', 450, 415);//底部文字ctx.fillText('箱包', 600, 415);ctx.stroke();//绘制矩形ctx.fillStyle = 'skyblue';ctx.fillRect(120, 200, 110, 200);