canas学习

最新推荐文章于 2024-09-20 20:51:24 发布

原创最新推荐文章于 2024-09-20 20:51:24 发布 · 658 阅读

0 ·

CC 4.0 BY-SA版权

canvas 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了canvas标签，它是图形容器，需用脚本绘制。阐述了浏览器兼容性，介绍了canvas的API、坐标系等基本概念。说明了绘图操作基于CanvasRenderingContext2D对象，还提及可绘制3D图形、文本等，以及高级操作和优化方案，最后介绍了变换、圆弧等内容。

部署运行你感兴趣的模型镜像

1. canvas是一个画布标签，作为图形容器，必须使用脚本进行绘制。

2.浏览器的兼容性。

IE 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签。

注释：IE 8 或更早版本的 IE 浏览器不支持 <canvas> 标签。

在使用Canvas前，用canvas.getContext来测试浏览器是否支持Canvas：

<canvas id="test-canvas" width="200" heigth="100"> <p>你的浏览器不支持Canvas</p> </canvas>

3.canvas的API https://www.w3cschool.cn/htmltags/ref-canvas.html

4.几个基本点：

（1）画布：绘图的基础容器<canvas>进行承载

（2）路径：所走过的具体的路,一般指线。

（3）坐标系：

我们可以在Canvas上绘制各种形状。在绘制前，我们需要先了解一下Canvas的坐标系统：

Canvas的坐标以左上角为原点，水平向右为X轴，垂直向下为Y轴，以像素为单位，所以每个点都是非负整数。（关于浏览去对于小数像素的解析可以看这个，一般的浏览器是会进行四舍五入的https://www.jb51.net/css/70190.html）

5.开始一个绘画：

基于状态的绘制

绘图操作基于CanvasRenderingContext2D对象.

getContext('2d')方法让我们拿到一个CanvasRenderingContext2D对象，所有的绘图操作都需要通过这个对象完成。

var ctx = canvas.getContext('2d');

如果需要绘制3D怎么办？HTML5还有一个WebGL规范，允许在Canvas中绘制3D图形：

gl = canvas.getContext("webgl");

var canvas = document.getElementById('test-shape-canvas'), ctx = canvas.getContext('2d');

ctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小为200x200的矩形，擦除的意思是把该区域变为透明

ctx.fillStyle = '#dddddd'; // 设置颜色

ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小为130x130的矩形涂色

// 利用Path绘制复杂路径:

var path=new Path2D();

path.arc(75, 75, 50, 0, Math.PI*2, true);

path.moveTo(110,75);

path.arc(75, 75, 35, 0, Math.PI, false);

path.moveTo(65, 65);

path.arc(60, 65, 5, 0, Math.PI*2, true);

path.moveTo(95, 65);

path.arc(90, 65, 5, 0, Math.PI*2, true);

ctx.strokeStyle = '#0000ff';

ctx.stroke(path);

注：颜色的色值，可以有rgb,rgba,16进制，hsl，颜色英文

lineJoin的三个属性，默认是miter（尖角和miterLimit默认为10，如果大于则会变为bevel）,bevel(叠加)，round(圆)