定义和用法
fill() 方法填充当前的图像(路径)。默认颜色是黑色。
提示:请使用 fillStyle 属性来填充另一种颜色/渐变。
注释:如果路径未关闭,那么 fill() 方法会从路径结束点到开始点之间添加一条线,以关闭该路径,然后填充该路径。
JavaScript 语法:
context.fill();填充块区颜色
定义和用法
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
提示:请使用 strokeStyle 属性来绘制另一种颜色/渐变。
JavaScript 语法:
context.stroke();通过坐标绘制已经定义的路径
定义和用法
beginPath() 方法开始一条路径,或重置当前的路径。
提示:请使用这些方法来创建路径:moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。
提示:请使用 stroke() 方法在画布上绘制确切的路径。
JavaScript 语法:
ctx.beginPath();
ctx.lineWidth="5"; ctx.strokeStyle="red"; // 红色路径 ctx.moveTo(0,75); ctx.lineTo(250,75); ctx.stroke(); // 进行绘制ctx.beginPath();假设如果没有这个beginpath则会所有的路径都是红色。不会出现蓝色,beginpath相当于保存当前路径重新开启另外一条路径
ctx.strokeStyle="blue"; // 蓝色路径 ctx.moveTo(50,0); ctx.lineTo(150,130); ctx.stroke();
定义和用法
closePath() 方法创建从当前点到开始点的路径。
提示:请使用 stroke() 方法在画布上绘制确切的路径。
提示:请使用 fill() 方法来填充图像(默认是黑色)。请使用 fillStyle 属性来填充另一个颜色/渐变。
JavaScript 语法:
context.closePath();创建开始点到当前点的路径
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
画出三角形
定义和用法
moveTo()
JavaScript 语法:
context.moveTo(x,y);
参数值
x | 路径的目标位置的 x 坐标 |
y | 路径的目标位置的 y 坐标 |
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);//开始点
ctx.lineTo(300,150);//移动点
ctx.stroke();//填充实线
注意:可根据此方法用鼠标拖动画线。
定义和用法
arc() 方法创建弧/曲线(用于创建圆或部分圆)。
提示:如需通过 arc() 来创建圆,请把起始角设置为 0,结束角设置为 2*Math.PI。
提示:请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。
- 中心:arc(100,75,50,0*Math.PI,1.5*Math.PI)
- 起始角:arc(100,75,50,0,1.5*Math.PI)
- 结束角:arc(100,75,50,0*Math.PI,1.5*Math.PI)
JavaScript 语法:
context.arc(x,y,r,sAngle,eAngle,counterclockwise);//画圆圈,可以设置fillstyle的样式(颜色),在调用fill()方法可以给圆上颜色。
参数值
x | 圆的中心的 x 坐标。 |
y | 圆的中心的 y 坐标。 |
r | 圆的半径。 |
sAngle | 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。 |
eAngle | 结束角,以弧度计。 |
counterclockwise | 可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。 |
定义和用法
scale() 方法缩放当前绘图,更大或更小。
注释:如果您对绘图进行缩放,所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2),那么绘图将定位于距离画布左上角两倍远的位置。
JavaScript 语法:
context.scale(scalewidth,scaleheight);缩放当前图片,按照一定的比例。
参数值
scalewidth | 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推) |
scaleheight | 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.) |
定义和用法
drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。
JavaScript 语法 1
在画布上定位图像:
context.drawImage(img,x,y);在画布上定义流媒体,图像和视屏均可
JavaScript 语法 2
在画布上定位图像,并规定图像的宽度和高度:
context.drawImage(img,x,y,width,height);
JavaScript 语法 3
剪切图像,并在画布上定位被剪切的部分:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数值
img | 规定要使用的图像、画布或视频。 |
sx | 可选。开始剪切的 x 坐标位置。 |
sy | 可选。开始剪切的 y 坐标位置。 |
swidth | 可选。被剪切图像的宽度。 |
sheight | 可选。被剪切图像的高度。 |
x | 在画布上放置图像的 x 坐标位置。 |
y | 在画布上放置图像的 y 坐标位置。 |
width | 可选。要使用的图像的宽度。(伸展或缩小图像) |
height | 可选。要使用的图像的高度。(伸展或缩小图像) |
相关推荐
主要介绍了 Android canvas drawBitmap方法详解及实例的相关资料,需要的朋友可以参考下
主要介绍了详解Html5 Canvas画线有毛边解决方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要介绍了小程序中canvas的drawImage方法参数使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
本篇文章主要介绍了js实现canvas保存图片为png格式并下载到本地的方法,非常具有实用价值,需要的朋友可以参考下
2.页面通信 3.组件间通信 4.canvas(生成图片、预览/保存、文字换行) 1.颜色选择器 从小程序的文档中没有找到相应的颜色选择组件,昨天(18.3.13)小程序插件功能上线了,小伙伴们也可以选择插件。写这个demo是在...
本篇文章主要介绍了Android Canvas方法总结最全面详解API,分享给大家,具体如下: 常用方法 drawXxx方法族:以一定的坐标值在当前画图区域画图,另外图层会叠加, 即后面绘画的图层会覆盖前面绘画的图层。 ...
网页开发经典教程,主要介绍了Html5和canvas的设计方法
之前我们简单的了解了canvas的基本用法,这里我们来了解下如何将html内容写入到canvas中生成图片,这里我使用到了html2canvas插件,这个插件是基于canvas实现的 ...在html2canvas中主要使用两种方法 1:将ht
主要介绍了HTML5 Canvas之测试浏览器是否支持Canvas的方法,本文给出了两种原生方法和一个modernizr类库,需要的朋友可以参考下
Java中的Canvas绘图源码实例,主要是画线条、弧线、圆角矩形、三角形、文字、圆形等简单的几何图形,主要是通过创建DrawingCanvas对象canvas,为canvas设置命令监听者,实现接口CommandListener的方法,把缓冲区图像...
此资源是我编写的一个小游戏,基于HTML5中...在代码中主要实现了小方块的生成,键盘键事件的监听,小球的移动和碰壁之后的反弹以及怎样消除小方块等方法。代码使用到了一个js脚本库,为此可能还会出现版本二,望关注。
HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间间隔绘制不同的帧,这样看起来就像动画在播放。 关键技术点: JavaScript 函数setTimeout()有两个...
<canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上...在<canvas>>元素上绘图主要有三步: 获取<canvas>元素对应的DOM对象,这是一个Canvas对象; 调用Canvas对象的getContext()方法,得到一个CanvasRende
主要介绍了vue 使用html2canvas将DOM转化为图片的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Js之canvas获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解、插件。
以下是方案的主要作用: 问题解决: 方案的核心目标是解决问题。通过系统性的规划和执行,方案能够分析问题的根本原因,提供可行的解决方案,并引导实施过程,确保问题得到合理解决。 目标达成: 方案通常与明确的...
整个流程中所用到的主要Canvas API有: 绘制图像: drawImage() 获取图像数据: getImageData() 重写图像数据: putImageData() 导出图像: toDataURL() 1. drawImage() 顾名思义,该方法就是用于将图像绘
主要介绍了JS使用canvas中的measureText方法测量字体宽度,结合实例形式分析了canvas的measureText方法相关使用技巧,需要的朋友可以参考下
canvas有个很强大的api是drawImage()(w3c): 他的主要功能就是绘制图片、视频,甚至其他画布等。 问题: ...2. 获取canvas+设置宽高 var cav1 = document.getElementById('canvas1'), wWidth = 800,
<canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext...2.调用Canvas对象的getContext()方法,得到一个CanvasRendering