canvas
canvas
丨Anna丨
这个作者很懒,什么都没留下…
展开
-
38 canvas签名
38 canvas签名示例 <head> <meta charset="UTF-8"> <title>26_事件</title> <style> #test{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: #BBAAFF; }原创 2020-10-29 17:45:10 · 231 阅读 · 0 评论 -
37 canvas导出为图像及事件操作
37 canvas导出为图像及事件操作1 canvas导出为图像语法toDataURL()注意是canvas元素接口上的方法,返回一个BASE64的图片信息示例 <head> <meta charset="UTF-8"> <title>25_导出为图像</title> <style> #test{ position: absolute; left: 0; right: 0; .原创 2020-10-29 17:12:03 · 267 阅读 · 0 评论 -
36 canvas全局透明度&覆盖合成
36 canvas全局透明度&覆盖合成1 全局透明度语法globalAlpha = value 这个属性影响到 canvas 里所有图形的透明度, 有效的值范围是 0.0 (完全透明)到 1.0(完全不透明) 默认是 1.0示例 <head> <meta charset="UTF-8"> <title>23_全局透明度</title> <style> #test{ positio原创 2020-10-29 16:49:52 · 422 阅读 · 0 评论 -
35 像素操作
35 像素操作 我们可以直接通过ImageData对象操纵像素数据,直接读取或将数据数组写入该对象中语法得到场景像素数据 getImageData():获得一个包含画布场景像素数据的ImageData对像,它代表了画布区域的对象数据 ctx.getImageData(sx, sy, sw, sh) sx:将要被提取的图像数据矩形区域的左上角 x 坐标。 sy:将要被提取的图像数据矩形区域的左上角 y 坐标。 sw:将要被提取的图像数据矩形区域的宽度。 sh:将要被..原创 2020-10-29 16:20:34 · 596 阅读 · 0 评论 -
34 canvas阴影
34 canvas阴影canvas阴影包括文本阴影和盒模型阴影语法shadowOffsetX = float shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离, 它们默认都为 0。 shadowOffsetY = float shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离, 它们默认都为 0。 shadowBlur = float shadowBlur 用于设定阴影原创 2020-10-29 15:49:50 · 757 阅读 · 0 评论 -
33 canvas绘制文本
33 canvas绘制文本1绘制文本语法canvas 提供了两种方法来渲染文本: fillText(text, x, y) 在指定的(x,y)位置填充指定的文本 strokeText(text, x, y) 在指定的(x,y)位置绘制文本边框示例 <head> <meta charset="UTF-8"> <title>18_绘制文本</title> <style> #test{ .原创 2020-10-29 15:27:09 · 401 阅读 · 0 评论 -
32 canvas渐变
31 canvas渐变1线性渐变语法 canvas渐变(线性渐变) createLinearGradient(x1, y1, x2, y2) 表示渐变的起点 (x1,y1) 与终点 (x2,y2) gradient.addColorStop(position, color) gradient :createLinearGradient的返回值 addColorStop 方法接受 2 个参数, position 参数必须是一个 0.0 与 .原创 2020-10-29 14:41:45 · 224 阅读 · 0 评论 -
31 canvas使用图片及设置背景
31 canvas使用图片及设置背景1使用图片在canvas中插入图片(需要image对象) 1.canvas操作图片时,必须要等图片加载完才能操作 2.drawImage(image, x, y, width, height) 其中 image 是 image 或者 canvas 对象,x 和 y 是其在目标 canvas 里的起始坐标。 这个方法多了2个参数:width 和 height,这两个参数用来控制 当像canvas画入时应该缩放的大小在canvas中设置背景(需要.原创 2020-10-29 14:30:48 · 13105 阅读 · 0 评论 -
30 canvas中的变换
29 canvas中的变换语法 translate(x, y) 我们先介绍 translate 方法,它用来移动 canvas的原点到一个不同的位置。 translate 方法接受两个参数。x 是左右偏移量,y 是上下偏移量, 在canvas中translate是累加的 rotate(angle) 这个方法只接受一个参数:旋转的角度(angle),它是顺时针方向的,以弧度为单位的值。 旋转的中心点始终是 canvas 的原点,如果要改变它,我们需要用到 transla原创 2020-10-29 12:09:00 · 210 阅读 · 0 评论 -
29 canvas贝塞尔曲线
29 canvas贝塞尔曲线1二次贝塞尔曲线语法quadraticCurveTo(cp1x, cp1y, x, y) 绘制二次贝塞尔曲线,cp1x,cp1y为一个控制点,x,y为结束点。 起始点为moveto时指定的点解析示例 <head> <meta charset="UTF-8"> <title>07_绘制圆弧</title> <style> #test{ position: .原创 2020-10-29 11:16:50 · 173 阅读 · 0 评论 -
28 绘制圆弧
28 绘制圆弧1 角度与弧度的js表达式radians=(Math.PI/180)*degrees2arc语法 arc(x, y, radius, startAngle, endAngle, anticlockwise) 画一个以(x,y)为圆心的以radius为半径的圆弧(圆),从startAngle开始到endAngle结束, 按照anticlockwise给定的方向(默认为顺时针)来生成。 ture:逆时针 false:顺时针 x,y为.原创 2020-10-29 10:59:15 · 597 阅读 · 0 评论 -
27 canvas绘制路径
27 canvas绘制路径 图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。1canvas绘制路径步骤 1.首先,你需要创建路径起始点。 2.然后你使用画图命令去画出路径 3.之后你把路径封闭。 4.一旦路径生成,你就能通过描边或填充路径区域来渲染图形。2绘制三角形API beginPath() 新建一条路径,生成之后,图形绘制命令被指向到路径上准备生成路径。 ...原创 2020-10-29 10:23:06 · 610 阅读 · 0 评论 -
26 canvas绘制矩形
26 canvas绘制矩形1绘制矩形方法语法 canvas提供了三种方法绘制矩形: ---->绘制一个填充的矩形(填充色默认为黑色) fillRect(x, y, width, height) ---->绘制一个矩形的边框(默认边框为:一像素实心黑色) strokeRect(x, y, width, height) ---->清除指定矩形区域,让清除部分完全透明。 clearRect(x, y, width, height) x与y.原创 2020-10-28 22:22:43 · 5675 阅读 · 0 评论 -
25 canvas基本使用
25 canvas基本使用1什么是canvas(画布)<canvas> 是 HTML5 新增的元素,可用于通过使用JavaScript中的脚本来绘制图形例如,它可以用于绘制图形,创建动画。<canvas> 最早由Apple引入WebKit我们可以使用<canvas>标签来定义一个canvas元素----->使用<canvas>标签时,建议要成对出现,不要使用闭合的形式。...原创 2020-10-28 16:11:01 · 207 阅读 · 0 评论