canvas渲染学习笔记1

最新推荐文章于 2024-08-23 08:55:28 发布

飓风kk

最新推荐文章于 2024-08-23 08:55:28 发布

阅读量495

点赞数

文章标签： canvas html5 渲染器

本文链接：https://blog.csdn.net/weixin_37668601/article/details/105814178

版权

这篇博客详细介绍了HTML5 canvas元素，包括其宽高属性、2D渲染上下文和坐标系统。讨论了2D渲染的API，如fillStyle、strokeStyle、fillRect、strokeRect、clearRect等，以及路径绘制、渐变、图案填充、文字绘制和图像处理。还提到了drawImage方法用于绘制切片图。

摘要由CSDN通过智能技术生成

canvas 画布，通过dom可以动态添加到html树中，或者静态的写在html文件中。
canvas元素只有两个属性 width height;其创造了一个固定大小的画布，所有的渲染操作均在这个画布上进行。

两种渲染方式： 2d模式和webgl模式
var canvas = document.getElementById(‘canvas’);
var ctx = canvas.getContext(‘2d’);
var gl = canvas.getContext(‘experimental-webgl’);
or var gl = canvas.getContext(‘webgl’);

坐标系是左上角（0， 0）右x增大下y增大

2d的API：
ctx.fillStyle 填充样式
ctx.strokeStyle 轮廓样式
fillStyle = color gradient pattern
ctx.fillRect(x, y, width, height) 绘制填充矩形
ctx.strokeRect(x, y, width, height) 绘制一个矩形边框
clearRect(x, y, width, height) 清除指定区域

坐标均是相对于canvas原点。

绘制路径：

ctx.beginPath();
beginPath 生成一条路线，这条路线的style为当前style，可以多次调用开始生成多条路线，每条路线style可以不相同。
ctx.moveTo(x, y); 会断掉当前的线，直接跳到下一个起始点
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();以线条