canvas学习培训笔记之2d画布基本的完成

日期:2021-02-26 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

1. Canvas是啥

< canvas > 是1个可使用脚本制作(一般是js)来制图的HTML元素

< canvas > 最开始由Apple引进WebKit,用于Mac OS X 的 Dashboard和 Safari

现如今,全部流行的访问器都适用它(IE9+,更低版本号需引进Explorer Canvas来适用)

1. 刚开始画图(3D渲染左右文)

< canvas > 元素造就了1个固定不动尺寸的画布,其上的3D渲染左右文CanvasRenderContext2D,能够用来绘图和解决要展现的內容。

若要在canvas上制图,最先得获得CanvasRenderContext2D2d3D渲染左右文。(此处指2d的,不谈webgl)

const canvas = document.getElementById('mycanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'pink';
ctx.fillRect(10, 10, 300, 300);

示例

2. CanvasRenderContext2D的特性:

根据设定左右文的特性,能够特定制图的款式。

全部特性以下:

特性 简介 canvas canvas元素 fillStyle 用来填充相对路径确当前的色调、方式或渐变色 font 字体样式款式 globalAlpha 特定在画布上绘图的內容的不全透明度 globalCompositeOperation 特定色调怎样与画布上已有的色调组成(生成) lineCap 特定线条的尾端怎样绘图 lineDashOffset 设定虚线偏位量 lineJoin 特定两条线条怎样联接 lineWidth 特定画笔(绘图线条)实际操作的线条宽度 miterLimit 当 lineJoin 特性为 "miter" 的情况下,这个特性特定了斜联接长度和线条宽度的最大比率 shadowBlur 模糊不清实际效果水平 shadowColor 黑影色调 shadowOffsetX 黑影水平偏位间距 shadowOffsetY 黑影竖直偏位间距 strokeStyle 用于画笔(绘图)相对路径的色调、方式和渐变色 textAlign 文字的对齐方法 textBaseline 文本竖直方位的对齐方法

3. Canvas宽高

Canvas的宽高必须用特性值width,height来特定

若未特定,则Canvas 的默认设置尺寸为300×150

根据款式特定的宽高,只是canvas元素的显示信息尺寸,其实不是制图自然环境的尺寸

canvas {width: 1000px;height: 600px;}
<canvas id="mycanvas" width="1000" height="600"></canvas>
<canvas id="mycanvas1" width="500" height="300"></canvas>
<canvas id="mycanvas2"></canvas>
...
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);

宽高示例

为何款式设定了一样尺寸,显示信息却迥然不一样的状况呢?

  • canvas自身有两套尺寸:1个是元素自身尺寸,1个是制图表层(drawing surface)的尺寸
  • 假如根据width,height特性来设定,是另外改动了元素自身和制图表层尺寸,
  • 假如canvas元素的尺寸不符制图表层尺寸时,则会对制图表层开展放缩,使之合乎元素自身尺寸,
  • 无独特要求,提议立即应用canvas的width和height就好

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:HTML5的构造和词义(5):嵌入新闻媒体 返回下一篇:没有了