一、创建路径

创建路径的步骤：

标识开始创建路径—设置图像属性—（标识结束创建路径）—绘制图像

1、标识路径的方法

beginPath()—表示开始创建路径(不可缺省)

closePath()—表示结束创建路径(可以缺省)

当绘制不完整图形时，如果使用closePath()方法图像会有闭合效果

2、设置图像的方法

rect(x,y,width,height)—设置矩形

arc(x,y,radius,startAngle,endAngle,direction)—设置圆形

x,y—圆心坐标

radius—半径

startAngle—创建路径的起点(0)
endAngle—创建路径的终点(PI*2)

direction—boolean值,表示绘制圆形是顺时针还是逆时针，默认为false，表示顺时针

*startAngle和endAngle可取的值为0-PI*2*

3、绘制图像的方法

stroke()—绘制轮廓
fill()—绘制实心图像
clip()—截取图像，只有矩形或圆形内的图像保留

小案例（绘制太极图）：

<!DOCTYPE HTML>
<html>
<head>
<title>一个大大的八卦</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="canv" width="800px" height="800px"></canvas>
</body>
<script>
var canvas=document.getElementById("canv");
var ctx=canvas.getContext("2d");
//绘制完整圆形--空心
ctx.beginPath();
ctx.arc(400,400,300,0,Math.PI*2);
ctx.stroke();
//绘制半圆
ctx.fillStyle="black";
ctx.beginPath();
ctx.arc(400,400,300,Math.PI/2,Math.PI*3/2);
ctx.fill();
//绘制两个半圆
ctx.beginPath();
ctx.arc(400,550,150,Math.PI/2,Math.PI*3/2,true);
ctx.fill();

ctx.fillStyle="white";
ctx.beginPath();
ctx.arc(400,250,150,Math.PI/2,Math.PI*3/2);
ctx.fill();

ctx.beginPath();
ctx.arc(400,550,30,0,Math.PI*2);
ctx.fill();

ctx.fillStyle="black";
ctx.beginPath();
ctx.arc(400,250,30,0,Math.PI*2);
ctx.fill();
</script>
</html>

绘制图像如下：

二、绘制线型

1、绘制线型

moveTo(x,y)—将光标移动到(x,y)坐标，设置起点坐标

lineTo(x,y)—将线连接到(x,y)坐标，设置终点坐标

2、设置线型

lineWidth—设置线型宽度，默认值为1.0

lineCap—设置线型的端点的形状

butt—默认值，直角形状

round—圆角形状

square—正方向形状，效果与butt基本相同，用的较少

lineJoin—设置两条线之间连接点的形状

round—圆角

bevel—斜角

miter—默认值，尖角

miterLimit—设置尖角的延伸范围，只有lineJoin="miter"时才能使用该属性

小案例：

<!DOCTYPE HTML>
<html>
<head>
<title>设置线型</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="canv" width="800px" height="800px"></canvas>
</body>
<script>
var canv=document.getElementById("canv");
var ctx=canv.getContext("2d");

ctx.lineWidth="10";
//ctx.lineCap="round";
ctx.lineCap="butt";

//ctx.lineJoin="round";
//ctx.lineJoin="bevel";
ctx.lineJoin="miter";

ctx.beginPath();
ctx.moveTo(200,80);
ctx.lineTo(200,220);

ctx.lineTo(240,80);
ctx.stroke();
</script>
</html>

三、绘制图片

1、引入图片

drawImage(image,x,y,width,height)

image—当前引入的图片

x,y—图片左上角的坐标值

width,height—设置图片的宽度与高度，这两个如果不设置，则按照图片默认大小显示

2、平铺方式

repeat,repeat-x,repeat-y,no-repeat

3、平铺实现方法

createPattern(image,type)

image—平铺的图片

type—平铺方式

4、实现步骤

调用createpattern()方法设置图片的平铺方式,并且返回值
将该返回值赋值给fillStyle属性
使用fillRect()方法进行绘制

小案例：

<!DOCTYPE HTML>
<html>
<head>
<title>平铺图片</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="canvas" width="1000px" height="2000px"style="background:yellow"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var img=new Image();
img.src="Jellyfish.jpg";

img.οnlοad=function(){
var ptn=context.createPattern(img,"repeat");
context.fillStyle=ptn;
context.fillRect(0,0,canvas.width,canvas.height);
}
</script>
</body>
</html>

运行效果：

特别提示：

1、引入图片之前需要先新建一个Image对象，然后使用src属性指定图片路径

2、由于图片加载较慢，所以createPattern()方法必须在图片加载结束后调用，即：使用img.onload方法

三、画布方法

1、状态方法

save()—保存画布的设置
restore()—恢复画布的设置

2、转换方法

scale(x,y)—缩小或放大对应的图像

x—width的放大倍数，如果值小于1，表示缩小
y—height的放大倍数，如果值小于1，表示缩小

translate(x,y)—移动图像的坐标值

将绘制的图像移动到(x,y)坐标值
该方法相对上次translate()设置的坐标进行移动，如果之前没有translate()方法，则相对于原点进行移动

3、rotate()—旋转当前画布(不是图像)
公式为 degrees * Math.PI / 180

小案例：

<!DOCTYPE HTML>
<html>
<head>
<title>画布的转换方法</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="canv" width="500px" height="500px" style="border:1px solid red"></canvas>
<input id="start" type="button" value="开始">
</body>
<script>
var canv=document.getElementById("canv");
var ctx=canv.getContext("2d");

var btn=document.getElementById("start");
btn.οnclick=function(){
ctx.translate(160,30);
ctx.fillStyle="rgba(120,93,222,0.25)";
ctx.fillRect(0,0,100,50);
for(var i=0;i<50;i++){
ctx.translate(10,10);
ctx.scale(0.95,0.95);
ctx.rotate(Math.PI/30);
ctx.fillRect(0,0,100,50);
}
}
</script>
</html>

运行结果：

HTML5——Canvas画布绘制图像、绘制线型和绘制图片相关推荐

php画布怎么清除,JavaScript_JavaScript html5 canvas画布中删除一个块区域的方法，本文实例讲述了html5 canvas画布 - phpStudy...
JavaScript html5 canvas画布中删除一个块区域的方法本文实例讲述了html5 canvas画布中删除一个块区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 附:图 ...
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
html5 图片弹跳,html5 canvas画布里面圆球弹跳动画效果代码
特效描述:html5 canvas 画布圆球弹跳动画.html5 跳动的球体代码结构 1. HTML代码 Untitled Document body { margin: 0px; } var i ...
html像素绘制文字,HTML5 - Canvas的使用样例10（绘制文本）
1,设置绘图上下文的font属性 (1)设置字体大小(像素)和字体名称 context.font = "22px Arial"; (2)为了适应多个浏览器,字体名字可以多列几种 c ...
html5 canvas画布上合成
source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标 ...
HTML5 Canvas中处理图像和视频
处理图像和视频除了绘制矢量图形和文本之外,canvas还提供了极为丰富的图像支持.开发者可以选择绘制某幅图像的全部或某个部分,在绘制时可以进行缩放或保持原样,可以把图像绘制到画布的任何地方.同时,还 ...
HTML5 canvas 画布
画布 canvas 与 svg canvas 能够做什么? 创建一块小画布(canvas) 创建画笔(getContext('2d')) 绘制矩形(fillRect(x,y,width,height) ...
html5 canvas 画布基础
canvas 画布基础学习整理的笔记,内容丰富有绘制矩形,绘制线条,绘制二次贝塞尔曲线,绘制弧线等.知识点在代码注释中效果图: 代码: <!DOCTYPE html> <htm ...
html5画布作品,HTML5 canvas画布
这里创建canvas标签,并定义其id为mycanvas,便于javascript绘图时获取该标签对象. 再看javascript绘图部分: var c=document.getelementbyid ...

HTML5——Canvas画布绘制图像、绘制线型和绘制图片

一、创建路径

二、绘制线型

三、绘制图片

三、画布方法

HTML5——Canvas画布绘制图像、绘制线型和绘制图片相关推荐

最新文章

热门文章