canvas 2d,html画布canvas

　　一. Canvas是啥

　　Canvas是一个可以用脚本(通常是js)绘制的HTML元素。

　　Canvas最早由苹果公司引入WebKit，并在Mac OS X的Dashboard和Safari中使用。

　　如今所有主流浏览器都支持(IE9，较低版本需要Explorer Canvas支持)

　　1. 开始画图（渲染上下文）

　　Canvas元素创建一个固定大小的画布，其渲染上下文CanvasRenderContext2D可用于绘制和处理要显示的内容。

　　要在画布上进行绘制，必须首先获得CanvasRenderContext2D2d呈现上下文。(这里指的是2d，不是webgl)

　　const canvas=document . getelementbyid( my canvas )；const CTX=canvas . get context( 2d )；ctx.fillStyle= pinkctx.fillRect(10，10，300，300)；例子

　　2. CanvasRenderContext2D的属性：

　　您可以通过设置上下文的属性来指定绘图的样式。

　　所有属性如下：

　　属性介绍canvas canvas元素fillStyle用于填充路径的当前颜色，或者mode gradient font字体样式globalAlpha指定画布上绘制的内容的不透明度globalCompositeOperation指定颜色如何与画布上已有的颜色组合(合成)。lineCap指定如何绘制线条的末端。lineDashOffset设置虚线的偏移量。lineJoin指定两条线，如如何连接线宽指定画笔(绘制线)的线宽操作限制当lineJoin属性为“斜接”时，此属性指定斜连接长度与线宽的最大比率阴影模糊模糊效果程度阴影颜色阴影颜色阴影偏移x阴影水平偏移距离阴影偏移阴影垂直偏移距离strokeStyle用于画笔(绘制)颜色、图案和渐变文本文本对齐文本基线文本垂直对齐

　　3. Canvas宽高

　　画布的宽度和高度需要由属性值width和height指定。

　　如果未指定，画布的默认大小为300150。

　　样式指定的宽度和高度只是画布元素的显示大小，而不是绘图环境的大小。

　　画布{宽度：1000px高度：600px} canvas id= my canvas width= 1000 height= 600 /canvas canvas id= mycanvas 1 width= 500 height= 300 /canvas canvas id= mycanvas 2 /canvas.ctx.fillStyle= redctx.fillRect(10，10，100，100)；宽高示例

　　为什么样式设置了同样的大小，却显示出完全不同的情况？

　　Canvas本身有两组大小：一组是元素本身的大小，另一组是绘图面的大小。如果设置了宽度和高度属性，元素本身和绘图表面大小都会被修改。如果canvas元素的大小不符合绘图表面大小，绘图表面将被缩放以符合元素本身的大小，没有特殊要求。建议直接用画布的宽度和高度。以上是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。