html5 canvas 详细教程1---样式设置/矩形绘制/路径绘制

最新推荐文章于 2023-02-21 11:19:11 发布
最新推荐文章于 2023-02-21 11:19:11 发布
阅读量2.6k 收藏 7
点赞数
分类专栏： web html 文章标签： canvas html5 html 标签

       <canvas></canvas>是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图 ，最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验。

一，绘图工具： getcontext-----getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

定义和用法

getContext() 方法返回一个用于在画布上绘图的环境。

context是一个封装了很多绘图功能的对象，获取这个对象的方法是    var ctx(或context)=canvas.getContext("2d");//html5仅支持2d不支持3d

参数

参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。

返回值

一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。

描述

返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2 维、3 维）提供不同的环境。当前，唯一支持的是 "2d"，它返回一个 CanvasRenderingContext2D 对象，该对象实现了一个画布所使用的大多数方法。


二，利用 ctx对象进行图像的绘制：

颜色、样式和阴影

属性 描述
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
shadowColor 设置或返回用于阴影的颜色
shadowBlur 设置或返回用于阴影的模糊级别
shadowOffsetX 设置或返回阴影距形状的水平距离
shadowOffsetY 设置或返回阴影距形状的垂直距离
方法 描述
createLinearGradient() 创建线性渐变（用在画布内容上）
createPattern() 在指定的方向上重复指定的元素
createRadialGradient() 创建放射状/环形的渐变（用在画布内容上）
addColorStop() 规定渐变对象中的颜色和停止位置

线条样式

属性 描述
lineCap 设置或返回线条的结束端点样式
lineJoin 设置或返回两条线相交时，所创建的拐角类型
lineWidth 设置或返回当前的线条宽度
miterLimit 设置或返回最大斜接长度

矩形

方法 描述
rect() 创建矩形
fillRect() 绘制“被填充”的矩形
strokeRect() 绘制矩形（无填充）
clearRect() 在给定的矩形内清除指定的像素

路径

方法 描述
fill() 填充当前绘图（路径）
stroke() 绘制已定义的路径
beginPath() 起始一条路径，或重置当前路径
moveTo() 把路径移动到画布中的指定点，不创建线条
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创建二次贝塞尔曲线
bezierCurveTo() 创建三次方贝塞尔曲线
arc() 创建弧/曲线（用于创建圆形或部分圆）
arcTo() 创建两切线之间的弧/曲线
isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false

转换

方法 描述
scale() 缩放当前绘图至更大或更小
rotate() 旋转当前绘图
translate() 重新映射画布上的 (0,0) 位置
transform() 替换绘图的当前转换矩阵
setTransform() 将当前转换重置为单位矩阵。然后运行 transform()

文本

属性 描述
font 设置或返回文本内容的当前字体属性
textAlign 设置或返回文本内容的当前对齐方式
textBaseline 设置或返回在绘制文本时使用的当前文本基线
方法 描述
fillText() 在画布上绘制“被填充的”文本
strokeText() 在画布上绘制文本（无填充）
measureText() 返回包含指定文本宽度的对象

图像绘制

方法 描述
drawImage() 向画布上绘制图像、画布或视频

像素操作

属性 描述
width 返回 ImageData 对象的宽度
height 返回 ImageData 对象的高度
data 返回一个对象，其包含指定的 ImageData 对象的图像数据
方法 描述
createImageData() 创建新的、空白的 ImageData 对象
getImageData() 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
putImageData() 把图像数据（从指定的 ImageData 对象）放回画布上

合成

属性 描述
globalAlpha 设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上

其他

方法 描述
save() 保存当前环境的状态
restore() 返回之前保存过的路径状态和属性
createEvent()  
getContext()  
toDataURL()  

1.样式设置：

canvas元素绘制图像的时候有两种方法，分别是

        context.fill()//填充

        context.stroke()//绘制边框

 style: 在进行图形绘制前，要设置好绘图的样式

（1）context.fillStyle//填充的样式

定义和用法

fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。

默认值： #000000
JavaScript 语法： context.fillStyle=color|gradient|pattern;

属性值

值 描述
color 指示绘图填充色的 CSS 颜色值。默认值是 #000000。
gradient 用于填充绘图的渐变对象（线性或放射性）
pattern 用于填充绘图的 pattern 对象

实例 1

定义从上到下的渐变，作为矩形的填充样式：


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.<strong>createLinearGradient</strong>(0,0,0,170);
my_gradient.<strong>addColorStop</strong>(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

实例 2

定义从黑到红到白的的渐变，作为矩形的填充样式：


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.<strong>createLinearGradient</strong>(0,0,170,0);
my_gradient.<strong>addColorStop</strong>(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

实例 3

用到的图像：

lamp

使用图像来填充绘图：


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.<strong>createPattern</strong>(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();


（2）context.strokeStyle//边框样式

定义和用法

strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。

默认值： #000000
JavaScript 语法： context.strokeStyle=color|gradient|pattern;

属性值

值 描述
color 指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。
gradient 用于填充绘图的渐变对象（线性或放射性）
pattern 用于创建 pattern 笔触的 pattern 对象

实例 1

绘制一个矩形。使用渐变笔触：


<span style="font-family: Consolas, 'Courier New', Courier, monospace; white-space: normal; color: rgb(51, 51, 51); font-size: 13px; line-height: 23px;">var c=document.getElementById("myCanvas");</span>
var ctx=c.getContext("<span style="font-family: Consolas, 'Courier New', Courier, monospace;">2d");</span>
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");

// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);


实例 2

用一个渐变笔触来写文本 "w3school.com.cn"：

var c=document.getElementById("myCanvas"); 

var ctx=c.getContext("2d");

ctx.<strong>font</strong>="30px Verdana";
// 创建渐变
var gradient=ctx.<strong>createLinearGradient</strong>(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.<strong>strokeText</strong>("Big smile!",10,50);


（3） context.lineWidth/lineCap/lineJoin/lineLimit  //图形边框宽度,线段样式

lineWidth 属性设置或返回当前线条的宽度，以像素计。


默认值： 1
JavaScript 语法： context.lineWidth=number;

属性值

值 描述
number 当前线条的宽度，以像素计。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.strokeRect(20,20,80,100);

lineCap 属性设置或返回线条末端线帽的样式。 注释："round" 和 "square" 会使线条略微变长。


默认值： butt
JavaScript 语法： context.lineCap="butt|round|square";

属性值

值 描述
butt 默认。向线条的每个末端添加平直的边缘。
round 向线条的每个末端添加圆形线帽。
square 向线条的每个末端添加正方形线帽。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(20,200);
ctx.<strong>stroke</strong>();

lineJoin 属性设置或返回所创建边角的类型，当两条线交汇时。注释：值 "miter" 受 miterLimit 属性的影响。


默认值： miter
JavaScript 语法： context.lineJoin="bevel|round|miter";

属性值

值 描述
bevel 创建斜角。
round 创建圆角。
miter 默认。创建尖角。


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineJoin="round";
ctx.<strong>moveTo</strong>(20,20);
ctx.<strong>lineTo</strong>(100,50);
ctx.lineTo(20,100);
ctx.<strong>stroke</strong>();

miterLimit 属性设置或返回最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。



提示：只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。

边角的角度越小，斜接长度就会越大。

为了避免斜接长度过长，我们可以使用 miterLimit 属性。

如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示（图解 3）：




默认值： 10
JavaScript 语法： context.miterLimit=number;

属性值

值 描述
number

正数。规定最大斜接长度。

如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.lineJoin="miter";
ctx.miterLimit=5;
ctx.moveTo(20,20);
ctx.lineTo(50,27);
ctx.lineTo(20,34);
ctx.stroke();



（4） 阴影 context.shadowBlur/shadowColor/shadowOffsetX/shadowOffsetY

shadowColor 属性设置或返回用于阴影的颜色。

注释：请将 shadowColor 属性与 shadowBlur 属性一起使用，来创建阴影。

提示：请通过使用 shadowOffsetX 和 shadowOffsetY 属性来调节阴影效果。

默认值： #000000
JavaScript 语法： context.shadowColor=color;

属性值

值 描述
color 用于阴影的 CSS 颜色值。默认值是 #000000。


shadowBlur 属性设置或返回阴影的模糊级数。

默认值： #000000
JavaScript 语法： context.shadowBlur=number;

属性值

值 描述
number 阴影的模糊级数


shadowOffsetX/Y 属性设置或返回形状与阴影的水平距离。

shadowOffsetX=0 指示阴影位于形状的正下方。

shadowOffsetX=20 指示阴影位于形状 left 位置右侧的 20 像素处。

shadowOffsetX=-20 指示阴影位于形状 left 位置左侧的 20 像素处。

提示：如需调整距离形状的垂直位置，请使用 shadowOffsetY 属性。

默认值： 0
JavaScript 语法： context.shadowOffsetX=number;

属性值

值 描述
number 正值或负值，定义阴影与形状的水平距离。

 实例：设置矩形阴影

<pre name="code" class="html">var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);

 

 

 
 

 
 

 （5）渐变方法 creatLinearGradient()/creatRadialGradient()/addColorStop()
 

 
 

 createLinearGradient() 方法创建线性的渐变对象。
 

 渐变可用于填充矩形、圆形、线条、文本等等。
 

 提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。
 

 提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。
 

 JavaScript 语法：
 

context.createLinearGradient(x0,y0,x1,y1);
 

 参数值
 

 参数 描述
 x0 渐变开始点的 x 坐标
 y0 渐变开始点的 y 坐标
 x1 渐变结束点的 x 坐标
 y1 渐变结束点的 y 坐标
 

 

 
 

 createLinearGradient() 方法创建放射状/圆形渐变对象。
 

 渐变可用于填充矩形、圆形、线条、文本等等。
 

 提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。
 

 提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。
 

 JavaScript 语法：
 

context.createRadialGradient(x0,y0,r0,x1,y1,r1);
 

 参数值
 

 参数 描述
 x0 渐变的开始圆的 x 坐标
 y0 渐变的开始圆的 y 坐标
 r0 开始圆的半径
 x1 渐变的结束圆的 x 坐标
 y1 渐变的结束圆的 y 坐标
 r1 结束圆的半径
 

 

 
 

 addColorStop() 方法规定 gradient 对象中的颜色和位置。
 

 addColorStop() 方法与 createLinearGradient() 或 createRadialGradient() 一起使用。
 

 注释：您可以多次调用 addColorStop() 方法来改变渐变。如果您不对 gradient 对象使用该方法，那么渐变将不可见。为了获得可见的渐变，您需要创建至少一个色标。
 

 JavaScript 语法：
 

gradient.addColorStop(stop,color);
 

 参数值
 

 参数 描述
 stop 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
 color 在结束位置显示的 CSS 颜色值
 

 

 
 

 实例
 

 

 通过多个 addColorStop() 方法来定义渐变：
 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
 
 

 
 

 定义一个从黑到白的渐变，作为矩形的填充样式：
 
 

 
 
 

 
 

var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
 

 

  颜色的表示方式: 直接用颜色名称:"red" "green" "blue"/十六进制颜色值: "#EEEEFF"/rgb(1-255,1-255,1-255)/rgba(1-255,1-255,1-255,透明度)
 
 

 （6）模式填充 createPattern()
 

 
 

 createPattern() 方法在指定的方向内重复指定的元素。元素可以是图片、视频，或者其他 <canvas> 元素。被重复的元素可用于绘制/填充矩形、圆形或线条等等。
 

 JavaScript 语法：
 

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
 

 参数值
 

 参数 描述
 image 规定要使用的图片、画布或视频元素。
 repeat 默认。该模式在水平和垂直方向重复。
 repeat-x 该模式只在水平方向重复。
 repeat-y 该模式只在垂直方向重复。
 no-repeat 该模式只显示一次（不重复）。
 

 


 
 

2.绘制矩形  
 

 参数值
 

 参数 描述
 x 矩形左上角的 x 坐标
 y 矩形左上角的 y 坐标
 width 矩形的宽度，以像素计
 height 矩形的高度，以像素计
 

 （1）rect(x,y,width,height)
 

rect() 方法创建矩形。提示：请使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。
 

（2）context.fillRect(x,y,width,height) 
 

 fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。提示：请使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式。
 

（3）strokeRect(x,y,width,height)
 

strokeRect() 方法绘制矩形（不填色）。笔触的默认颜色是黑色。提示：请使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。
 

（4）clearRect(x,y,width,height)
 

clearRect() 方法清空给定矩形内的指定像素。
 
 

实例：
 

在给定矩形内清空一个矩形：
 


 
 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);
 

 
通过 rect() 方法来创建三个矩形： 

 

 


 
 

 

JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// 红色矩形
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();

// 绿色矩形
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();

// 蓝色矩形
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();
 

 
绘制 150*100 像素的已填充矩形：
  

 

  
 

 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,150,100);
 

 

 

 绘制 150*100 像素的矩形：
 
 

 
 
 

 
 

<span style="font-size:10px;">var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(20,20,150,100);</span>
 

 

 

 

 3.绘制路径
 

 （1）开始路径绘制函数 beginPath()----一般放在最前面，创建一个路径其实点，表示将要开始绘制路径
 

 beginPath() 方法开始一条路径，或重置当前的路径,创建一个路径起始点。
 

 提示：请使用这些方法来创建路径：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。
 

 提示：请使用 stroke() 方法在画布上绘制确切的路径。
 

 
 
 

 （2）绘制路径/填充路径 stroke()/fill()-------一般确定好路径之后使用，进行路径的绘制
 

 
 

 stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。提示：请使用 strokeStyle 属性来绘制另一种颜色/渐变。
 

 fill() 方法填充当前的图像（路径）。默认颜色是黑色。 提示：请使用 fillStyle 属性来填充另一种颜色/渐变。
 

 注释：如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。
 

 
 
 

 （3）确定路径-----moveTo()/lineTo()/closePath()
 

 注意：canvas画布中，坐标（0,0）在左上角，x轴向下，y轴向右  
 

context.moveTo(x,y);    //移动路径到坐标（x,y）
 

context.lineTo(x,y);  //lineTo() 方法添加一个新点(x,y)，然后创建从该点到画布中最后指定点的线条。
 

context.closePath();   //closePath() 方法创建从当前点到开始点的路径。
 

context.isPointInPath(x,y);  //isPointInPath() 方法返回 true，如果指定的点位于当前路径中；否则返回 false。
 

 实例：
 

 绘制一条路径，形状是字母 L：
 
 

 
 
 

 
 

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.stroke();
 

 
绘制一条路径，形式是字母 L，然后绘制线条以返回开始点，并填充绿色： 

 

 

 
 
 

 
 

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();
ctx.fillStyle="green";
ctx.fill();
 

 
在画布上绘制两条路径；红色和蓝色： 

 

 
 
 

 
 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth="5";
ctx.strokeStyle="red"; // 红色路径
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke(); // 进行绘制
ctx.beginPath();
ctx.strokeStyle="blue"; // 蓝色路径
ctx.moveTo(50,0);
ctx.lineTo(150,130);
ctx.stroke(); // 进行绘制
 

 
绘制一个矩形，如果点 20,50 位于当前路径中： 

 

 

 
 
 

 
 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50))
   {
   ctx.stroke();
   };
 

 
（4）圆弧和曲线的绘制： 

 


 
 

二次贝塞尔曲线：---quadraticCurveTo(cpx,xpy,x,y) 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。
 

二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
 


 
 

  • 开始点：moveTo(20,20)
  • 控制点：quadraticCurveTo(20,100,200,20)
  • 结束点：quadraticCurveTo(20,100,200,20)
 

 

 
 

 参数 描述
 cpx 贝塞尔控制点的 x 坐标
 cpy 贝塞尔控制点的 y 坐标
 x 结束点的 x 坐标
 y 结束点的 y 坐标
 
 

 

 

 
 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
 

 

  

 

 
 
 

 三次贝塞尔曲线：bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。
 

  
 

 参数 描述
 cp1x 第一个贝塞尔控制点的 x 坐标
 cp1y 第一个贝塞尔控制点的 y 坐标
 cp2x 第二个贝塞尔控制点的 x 坐标
 cp2y 第二个贝塞尔控制点的 y 坐标
 x 结束点的 x 坐标
 y 结束点的 y 坐标
 

 

 

 
 

 三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
 
 

 
 

  • 开始点：moveTo(20,20)
  • 控制点 1：bezierCurveTo(20,100,200,100,200,20)
  • 控制点 2：bezierCurveTo(20,100,200,100,200,20)
  • 结束点：bezierCurveTo(20,100,200,100,200,20)
 
 

 

 
 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
 

 

 

 

圆弧线：arc(x,y,r,sangle,eangle,counterclockwise) 方法创建弧/曲线（用于创建圆或部分圆）。
 

 
 

 参数 描述
 x 圆的中心的 x 坐标。
 y 圆的中心的 y 坐标。
 r 圆的半径。
 sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
 eAngle 结束角，以弧度计。
 counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
 
 

 

 


 
 

 
 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
 

 

  • 中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
  • 起始角：arc(100,75,50,0,1.5*Math.PI)
  • 结束角：arc(100,7
 

 


 
 

两切线之间的弧：---arcTo(x1,y1,x2,y2,r) 方法在画布上创建介于两个切线之间的弧/曲线。
 

 
 

 参数 描述
 x1 弧的起点的 x 坐标
 y1 弧的起点的 y 坐标
 x2 弧的终点的 x 坐标
 y2 弧的终点的 y 坐标
 r 弧的半径
 
 

 

 

 
 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.beginPath();
ctx.moveTo(20,20);           // 创建开始点
ctx.lineTo(100,20);          // 创建水平线
ctx.arcTo(150,20,150,70,50); // 创建弧
ctx.lineTo(150,120);         // 创建垂直线
ctx.stroke();                // 进行绘制
 

 

 

 

 (4) 剪切画布----clip()
 

 
 

 clip() 方法从原始画布中剪切任意形状和尺寸。
 

 提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。
 
 

 

 
 

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 剪切矩形区域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// 在 clip() 之后绘制绿色矩形
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
 

 

 

 

 
 
 

 
 
 

 
 

                

        

        

    




    

      

        

            

              
                
                  hackerose1994
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    7
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
HTML 画布入门（三）使用 HTML 画布创建形状

				
			

			

				

					琴歌声声送我的博客
				

				

					12-18
					
					1559
					
				

			

		

		

			
				
我们可以使用许多不同的功能来绘制新的形状，这些函数可以通过 we set 使用。遵循类似的格式，只是它会创建一个自动描边的矩形。我们用来确定三角形的起始位置，然后根据需要绘制线条来绘制我们想要的三角形的形状。我们还谈到了一个事实，可用于在画布上的任何地方绘制线条，使我们能够制作更复杂的形状，如六边形和八边形。如您所见，所有这些函数都遵循相同的格式 - 它们在开始位置具有坐标，以及画布中的宽度和高度。在本指南中，我们介绍了如何在HTML画布中制作一些简单的形状：正方形，矩形，圆形和三角形。

			
		

	



                

              
                



	

		

			

				
					
html5画布

				
			

			

				

					kuaixiangzi的专栏
				

				

					03-25
					
					452
					
				

			

		

		

			
				
画布功能的展示1.判断浏览器是否支持该功能//设置画布的id,宽高，背景颜色为红色
<canvas id="first"width="250" height="250" style="background-color:red;">
你的浏览器不支持 Canvas 标签
</canvas>
2.首先获取 canvas 对象，然后调用 canvas 对象的 getContext 方法，这个方法目前只能传

			
		

	



                


  
              

                


	

		

			

				
					
h5 Canvas矩形的绘制

				
			

			

				

					suwu150
				

				

					02-26
					
					9291
					
				

			

		

		

			
				
h5 Canvas矩形的绘制
1.绘制矩形api
在Canvas中提供了绘制矩形的API：
fillRect(x, y, width, height)：绘制一个填充的矩形
strokeRect(x, y, width, height)：绘制一个矩形的边框
clearRect(x, y, width, height)：清除指定矩形区域，让清除部分完全透明


除此之外还可以通过Canvas中Canv...

			
		

	





	

		

			

				
					
html 本地预览图片 图片上绘制矩形框

				
			

			

				

					lw112190的专栏
				

				

					02-21
					
					615
					
				

			

		

		

			
				
html 本地预览图片 图片上绘制矩形框

			
		

	



		

			
		



	

		

			

				
					
html5绘制矩形

				
			

			

				

					b422761838的专栏
				

				

					10-16
					
					5983
					
				

			

		

		

			
				
Title


    
    
    
        var canvas = document.getElementById("canvas");
        //获得绘画环境
        var cxt = canvas.getContext("2d");
        //填充颜色
        cxt.fillStyle = "#39e1ff";
        //绘

			
		

	





	

		

			

				
					
HTML5 <canvas>

				
			

			

				

					烟汐忆梦
				

				

					01-03
					
					483
					
				

			

		

		

			
				
HTML5 
  HTML5 
标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过，
元素本身并没有绘制能力（它仅仅是图形的容器） -
您必须使用脚本来完成实际的绘图任务。
getContext()
方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
本手册提供完整的 getContext("2d")
对象属性和方法，可用于在画布上绘制文本、线条、矩形

			
		

	





	

		

			

				
					
HTML5 Canvas中绘制矩形实例

				
			

			

				

					09-28
				

			

		

		

			
				
主要介绍了HTML5 Canvas中绘制矩形实例,本文中使用了fillRect、strokeRect、clearRect三种API,需要的朋友可以参考下

			
		

	





	

		

			

				
					
HTML5 在canvas中绘制矩形附效果图

				
			

			

				

					09-28
				

			

		

		

			
				
可以使用绘图环境的矩形绘制函数来绘制矩形fillRect为绘制一个实心的矩形；strokeRect为绘制一个空心的矩形；clearRect为清除指定的矩形区域，使之完全透明，示例代码如下

			
		

	





	

		

			

				
					
js+html5实现canvas绘制简单矩形的方法

				
			

			

				

					10-24
				

			

		

		

			
				
主要介绍了js+html5实现canvas绘制简单矩形的方法,涉及html5图形绘制的基本技巧,需要的朋友可以参考下

			
		

	





	

		

			

				
					
HTML5 canvas基本绘图之绘制矩形

				
			

			

				

					09-28
				

			

		

		

			
				
<canvas></canvas>是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制矩形方法，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例

				
			

			

				

					09-28
				

			

		

		

			
				
主要介绍了使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例,作者举了2048小游戏和微信对话框两个实用的例子来作为操作Canvas API的实用练习推荐,需要的朋友可以参考下

			
		

	





	

		

			

				
					
html5 gradient,HTML canvas

				
			

			

				

					weixin_33961553的博客
				

				

					06-19
					
					223
					
				

			

		

		

			
				
HTML canvas createLinearGradient() 方法实例定义从黑到白的渐变(从左向右)，作为矩形的填充样式：YourbrowserdoesnotsupporttheHTML5canvastag.JavaScript：var c=document.getElementById("myCanvas");varctx=c.getContext("2d");var grd=ctx.c...

			
		

	





	

		

			

				
					
HTML5  canvas fillStyle 属性

				
			

			

				

					jingxiansheng的博客
				

				

					06-08
					
					415
					
				

			

		

		

			
				
定义用红色填充的矩形：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);





值
			描述
		color
			指示绘图填充色的CSS 颜色值。默认值是 #000000。
		gradient
			用于填充绘图的渐变对象（线性或放射性）。
		pattern
			
			用于填充绘图的...

			
		

	





	

		

			

				
					
js:三种简单的矩形绘制方法（画布canvas）

				
			

			

				

					qq_52824207的博客
				

				

					04-16
					
					4805
					
				

			

		

		

			
				
之前提到过画布canvas通过lineto方法绘制矩形，实际上画布canvas还有三种其他更简便的方法绘制矩形，而lineto方法可以绘制任何直线图形

三种绘制矩形的方法分别是：

rect();创建矩形路径（只生成路径）

fillRect();创建填充的矩形路径（生成路径并填充）

strokeRect();创建矩形路径并绘制（生成路径并绘制）

另外有一种清除矩形填充的方法（个人理解为矩形形状的橡皮擦）：

clearRect()

这是之前的博客：https://blog.csdn.net/qq_

			
		

	





	

		

			

				
					
Html5——canvas标签使用

				
			

			

				

					weixin_30293079的博客
				

				

					03-06
					
					100
					
				

			

		

		

			
				
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt....

			
		

	





	

		

			

				
					
canvas——绘制矩形

				
			

			

				

					sleepwalker_1992的专栏
				

				

					06-04
					
					5989
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>矩形</title>
</head>
<body>
<div id="container">
    <canvas id="c...

			
		

	





	

		

			

				
					
学习Canvas基础-绘制矩形

				
			

			

				

					qq_67983277的博客
				

				

					11-15
					
					4701
					
				

			

		

		

			
				
学习Canvas基础-绘制矩形

			
		

	





	

		

			

				
					
canvas绘制矩形

				
			

			

				

					编程界明世隐的博客
				

				

					01-14
					
					5890
					
				

			

		

		

			
				
canvas提供了三个API，分别是：

1.绘制一个填充的矩形
 fillRect(x, y, width, height)
2.绘制一个矩形的边框
 strokeRect(x, y, width, height)
3.清除指定矩形区域，让清除部分完全透明
 clearRect(x, y, width, height)

其中x、y是相对于画布左上角0,0 的距离，width是宽度，height设置矩形高度；

实例1


		
	window.onload=function(){
		...

			
		

	





	

		

			

				
					
绘制矩形_canvas-绘制矩形及弧形

					
最新发布

				
			

			

				

					06-09
				

			

		

		

			
				
上面的代码首先获取了 canvas 元素和 2D 上下文对象，然后调用 beginPath 方法开始新的路径，接着调用 arc 方法绘制弧形，最后设置填充颜色为红色并调用 fill 方法填充弧形。  arc 方法接受六个参数，分别是圆心的 x...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值