canvas的本质

1、<canvas> 标签只是图形容器，相当于一个画布，canvas 元素本身是没有绘图能力的。
2、所有的绘制工作必须在 js内部完成，相当于使用画笔在画布上画画。

使用

必须指定宽高，用到getcontext()方法

<canvas id="charts" width="800" height="400"></canvas>

context 是一个封装了很多绘图功能的对象（html5里新增的），我们在页面中创建一个 canvas 标签之后，首先要使用 getContext() 获取 canvas （用原生js获取元素），目前 getContext() 的参数只有 2d，暂时还不支持 3d

分类

1、js获取元素

const canvas = document.getElementById('charts');
const context = canvas.getContext('2d');

2、

绘制线段

moveTo(x, y)：把路径移动到画布中的指定点，不创建线条
lineTo(x, y)：添加一个新点，然后在画布中创建从该点到最后指定点的线条

context.strokeStyle = 'yellowgreen';
context.moveTo(0, 0);
context.lineTo(100, 100);
context.stroke();

绘制矩形

fillRect(x, y, width, height) 绘制填充颜色的矩形

strokeRect(x, y, width, height) 绘制线条的矩形

context.fillStyle = "pink";
context.strokeStyle = "darkred";
context.fillRect(0, 0, 100, 100);
context.strokeRect(120, 0, 100, 100);

绘制圆形

arc(x, y, radius, starAngle, endAngle, anticlockwise)
- x : 圆心的 x 坐标
- y：圆心的 y 坐标
- radius ：半径
- starAngle ：开始角度
- endAngle：结束角度
- anticlockwise ：是否逆时针（true）为逆时针，(false)为顺时针

context.beginPath();
context.arc(300, 350, 100, 0, Math.PI * 2, true);
//不关闭路径路径会一直保留下去
context.closePath();
context.fillStyle = 'rgba(0,255,0,0.25)';
context.fill();
// 或
// context.stroke(); // 此时就会有问题

清除路径

清除绘画的路径，多个图形就不会连接在一起

context.beginPath()
context.closePath()

清除矩形区域

当在一个画布反复绘制图形，需要将上一次的图形清空

clearRect(x, y, width, height)

绘制文字

fillText(text, x, y, maxWidth)

案例：绘制一个柱状图

一个少女心满满的例子带你入门 Canvas

【canvas使用】相关推荐

canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
画布Canvas的使用
canvas.drawText();//画文本 canvas.drawArc();//画弧 canvas.drawCircle();//画圆 canvas.drawBitmap(); canvas.d ...
Android 自定义View Canvas —— Bitmap
Bitmap 绘制图片常用的方法有一下几种 (1) drawBitmap(@NonNull Bitmap bitmap, float left, float top, @Nullable Paint ...
Android 自定义View —— Canvas
上一篇在android 自定义view Paint 里面说了几种常见的Point 属性绘制图形的时候下面总有一个canvas ,Canvas 是是画布上面可以绘制点,线,正方形,圆,等等,需要和 ...
android Canvas 最基础知识总结
学习Canvas 要先学习view 知识,这样才好学习第一步创建一个方法让它继承 View 如下图然后快捷键ait+/ 生成构造方法, 用来初始化View ,比如自定一个一些init()方法, ...
canvas绘制的文字如何换行
<html><head><title>canvas绘制的文字如何换行</title><style type="text/css" ...
从0到1 html5 canvas,Html5 Canvas学习之路（五）
Canvas 图像(上) Canvas 图像API可以加载图像数据,然后直接将图像应用到画布上.还可以裁切.拼贴图像数据,以显示用户需要的部分.此外,Canvas还提供了像素数据的存储功能,这样就能对 ...
SVG和canvas
1.SVG实现的圆环旋转效果参考:http://www.softwhy.com/article-6472-1.html 2.SVG中的图形可以通过 transform="matrix(0 ...
D3.js、HTML5、canvas 开发专题
https://www.smartdraw.com/genogram/ http://www.mamicode.com/info-detail-1163777.html D3折线图 https:// ...
7个华丽的基于Canvas的HTML5动画
说起HTML5,可能让你印象更深的是其基于Canvas的动画特效,虽然Canvas在HTML5中的应用并不全都是动画制作,但其动画效果确实让人震惊.本文收集了7个最让人难忘的HTML5 Canvas动 ...

【canvas使用】