canvas绘制基础图形

canvas绘制基础图形

Tags
Canvas
HTML5
前端可视化
CreatedTime
Aug 22, 2022 02:35 PM
Slug
2018-08-20-canvas-shape
UpdatedTime
Last updated August 22, 2022

什么是 canvas?

这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

canvas 和 svg、vml 的区别?

canvas标签和 SVG 以及 VML 之间的一个重要的不同是,canvas标签 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。

canvas 绘图学习

大多数 Canvas 绘图 API 都没有定义在 canvas标签本身上,而是定义在通过画布的getContext()方法获得的一个“绘图环境”对象上。而canvas标签本身默认的宽高分别是 300px、150px。

canvas 绘制矩形

// 处理canvas元素 var c = document.querySelector("#my-canvas"); c.width = 150; c.height = 70; // 获取 指定canvas标签 上的context对象 var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; // 颜色 ctx.fillRect(0, 0, 150, 75); // 形状

canvas 绘制路径

var c = document.querySelector("#my-canvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); // 开始坐标 ctx.lineTo(200, 100); // 结束坐标 ctx.stroke(); // 立即绘制

canvas 绘制圆形

对于ctx.arc()这个接口,5 个参数是:(x,y,r,start,stop)。其中,x 和 y 是圆心坐标,r 是半径。
startstop的单位是弧度制。不是长度,也不是 °。
var c = document.querySelector("#my-canvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke();

canvas 绘制文字

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50);