学习：Canvas基本用法

时间：2023-01-31 08:46:35

前言

接触svg一段时间了。慢慢的觉得还是要学习一下canvas（其实是看粒子效果都是canvas，svg上加canvas实现粒子效果，所以没办法懒了）网上的教程不少还是按个人习惯记录一下。

MDN中的canvasAPI文档：http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html
教程：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Basic_usage

Canvas

创建
canvas需要创建后再获取才能使用

html:(标准)

<canvas></canvas>

d3:（个人习惯）

var canvas_js = document.getElementById('js');
var canvas_d3 = d3.selectAll("#ceshi").append("canvas");

关于d3

d3.js v4版本支持canvas。目前还在使用v3版本。所以此处用于记录其中的各种问题。

上述的d3创建canvas。canvas_d3为d3封装的对象。使用过d3的应该习以为常的使用下列语法，但是canvas中需要注意是不可取的。因为d3_v3不支持canvas~~~

//创建
var canvas_d3 = d3.selectAll("#ceshi").append("canvas");
canvas_d3.width = 200;//报错哦。
//个人解决办法
//1.单个属性
canvas_d3[0][0].width = 200;
//2.一劳永逸 
var canvas_d3 = >d3.selectAll("#ceshi").append("canvas")[0][0];
canvas_d3.width = 200;

基本API

width( ) && height( )

设置宽高

getContext( )

获取画布。专业点的说法就是渲染上下文，通过使用 document.getElementById() 方法来为 元素得到DOM对象。一旦有了元素对象，你可以通过使用它的getContext() 方法来访问绘画上下文。

//js
var canvasjs = document.getElementById('js');
canvasjs.getContext('2d');
//d3
var canvasd3 = d3.selectAll("body").append("canvas")[0][0];
canvasd3.getContext("2d");

参数:
‘2d’ ：初学嘛。只好2D渲染了。

栅格

画布栅格（canvas grid）太专业了。。。空间坐标和d3一致，默认左上角为原点。

绘制基本图形

矩形
canvas默认支持的图形只有矩形，并提供三种绘制矩形API。

fillRect(x,y,width,height)：填充
strokeRect(x,y,width,height)边框

需要注意的是：边框线默认宽度2px;且向边外扩充1px;就是说我在（20，20）处画了一个80*80的边框矩形，但是实际显示区域是（19，19）处起线宽2px，内部79*79的矩形。

clearRect(x,y,width,height)清除
代码
//ctx_js
//绘制填充矩形
ctx_js.fillRect(20, 20, 80, 80);
//绘制矩形的边框
ctx_js.strokeRect(120, 20, 80, 80);
//清除一个矩形区域
ctx_js.clearRect(70, 20, 80, 80);
//
//ctx_d3
//绘制填充矩形
ctx_d3.fillRect(20, 20, 80, 80);
//绘制矩形的边框
ctx_d3.strokeRect(120, 20, 80, 80);
//清除一个矩形区域
ctx_d3.clearRect(70, 20, 80, 80);
语法基本一致了，之后就不做区别了

绘制路径

基本步骤

beginPath():创建起点
画图命令画出路径
closePath:封闭路径，组合图形时，多个独立路径一定要闭合后再绘制新的路径，或者在路径命令中闭合
fill()或stroke()：路径生成后，可以通过描边（stroke）或者填充（fill）来渲染图形

画图命令

**线**lineTo(x,y);
**圆**arc(x,y,radius,startAngle,endAngle,anticlockwise);
**贝塞尔曲线**quadraticCurveTo(cp1x,cp1y,x,y);

Path2D()
路径对象

标签：

相关文章