canvas 基础教程 |
您所在的位置：网站首页 › canvas基础教程 › canvas 基础教程 |
canvas 基础教程
|
canvas 看起来和 img 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，canvas 标签只有两个属性—— width和height。 canvas 元素创造了一个固定大小的画布，canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。你可以通过使用它的getContext() 方法来访问绘画上下文。 var canvas = document.getElementById('tutorial');var ctx = canvas.getContext('2d'); // 画图基础Copied! #概念#xy栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。 canvas只支持一种原生的图形绘制（马上显现在canvas上，即时生效）：矩形。所有其他的图形的绘制都至少需要生成一条路径。canvas提供了三种方法绘制矩形： fillRect(x, y, width, height) 绘制一个填充的矩形strokeRect(x, y, width, height) 绘制一个矩形的边框clearRect(x, y, width, height) 清除指定矩形区域，让清除部分完全透明。x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。 #2. 绘制路径路径绘制图形步骤： 首先，你需要创建路径起始点。然后你使用画图命令去画出路径。之后你把路径封闭。一旦路径生成，你就能通过描边或填充路径区域来渲染图形。函数 beginPath()，路径的第一步。 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。closePath()，不是必需的。 闭合路径。stroke()，没有闭合的形状不会自动闭合。 通过线条来绘制图形轮廓。fill()，没有闭合的形状都会自动闭合。 通过填充路径的内容区域生成实心的图形。#总结画矩形fillRect画路径基础beginPath()。常和moveTo（将笔触移动到指定的坐标x以及y上）搭配closePath() 和开始路径形成闭合路径。fill() 填充stroke() 画线画图形arc(x, y, radius, startAngle, endAngle, anticlockwise)lineTo(x, y) 绘制直线画路径，一定是遇到stroke/fill方法，才开始绘制。 生成闭合路径（如三角形边框），需要closePath + stroke()组合。当然，如果你本身是不需要闭合的图形，则直接使用stroke即可。 var ctx = canvas.getContext('2d');ctx.beginPath();ctx.moveTo(75, 50);ctx.lineTo(100, 75);ctx.lineTo(100, 25);ctx.fill(); Copied! #样式和颜色颜色fillStylestrokeStyle样式globalAlphalineWidthglobalCompositeOperation 遮盖策略// 这些 fillStyle 的值均为 '橙色'ctx.fillStyle = "orange";ctx.fillStyle = "#FFA500";ctx.fillStyle = "rgb(255,165,0)";ctx.fillStyle = "rgba(255,165,0,1)";// 设置透明度值ctx.globalAlpha = 0.2; // 当前绘线的粗细ctx.lineWidth = 1; // 设置遮盖策略：交集清除ctx.globalCompositeOperation = 'destination-out' Copied! #绘制元素图片drawImage(imageOrCanvas, x, y)。image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。文本fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.strokeText(text, x, y [, maxWidth]) 在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.var img = new Image();img.src = 'images/backdrop.png';img.onload = function(){ ctx.drawImage(img,0,0);}ctx.font = "48px serif";ctx.fillText("Hello world", 10, 50);
|
【本文地址】
今日新闻 |
推荐新闻 |