H5的canvas画布使用

编程入门行业动态更新时间:2024-10-25 06:26:22

H5的canvas<a href=https://www.elefans.com/category/jswz/34/1766074.html style= 画布使用"/>

H5的canvas画布使用

H5的canvas

H5的canvas
- 使用canvas画布
- canvas上绘制图形
  - 绘制矩形
  - 绘制文字
  - 绘制其他不规则图形创建路径
    - 绘制矩形
    - 绘制圆形
    - 绘制弧形
    - 绘制直线
    - 绘制折线
    - 绘制多边形
- canvas给绘制的图形设置样式
  - 设置样式
  - 设置渐变
  - 设置阴影
  - 设置线性
- canvas中绘制图像
  - 绘制图像
  - 平铺图像
  - 切割图像
- canvas中的变形

使用canvas画布

定义canvas元素
- 画布的长宽可以通过两种方式设置
  - 通过css样式来设置；
    - 注意：通过canvas绘制的图像的显示比例会变化；
    - 建议：不要使用css方式设置canvas的显示大小；
  - 直接通过html中的属性height和width来设置（推荐）；
```
<canvas id="stockGraph" width="150" height="150"></canvas>
```

创建画布对象

获取 < canvas> 元素，通过 < canvas> 元素,创建画布对象；
使用getContext(‘2d’)函数，返回画布对象；

利用画布对象进行图形的绘制；

// 获取HTML页面中的< canvas>元素
var canvas = document.getElementById("canvas");
/*
通过< canvas>元素,创建画布对象
使用getContext(type)函数,创建画布对象
* 该函数返回画布对象
* type参数
* 设置当前创建的画布是2d还是3d
* 注意
* 参数选项是2d
* 必须写成"2d"
*/
var context = canvas.getContext("2d");
// 利用画布对象,进行绘制图形
context.fillRect(10,10,100,100);

canvas上绘制图形

绘制矩形

直接使用矩形方法
- 绘制实心(填充)矩形；
  - fillRect(x,y,width,height)；
  - 参数：
    - x和y 绘制矩形的左上角的坐标值；
    - width 设置绘制矩形的宽度(单位为px)；
    - height 设置绘制矩形的高度(单位为px)；
- 绘制空心(描边)矩形；
  - strokeRect(x,y,width,height)；
  - 参数：
    - x和y 绘制矩形的左上角的坐标值；
    - width 设置绘制矩形的宽度(单位为px)；
    - height 设置绘制矩形的高度(单位为px)；
- 清除指定区域的矩形；
  - clearRect(x,y,width,height)；
  - 参数同上；

绘制文字

font 设置文字的属性（用法同 CSS 属性 font ）。
textAlign：水平对齐方式。
- left ：基准线在左边；
- center ：基准线在中间；
- right ：基准线在右边；
textBaseline：垂直对齐方式。
- top ：基准线在上边；
- middle ：基准线在中间；
- bottom ：基准线在下边；
- hanging ：悬挂基线；
- alphabetic ：字母基线。
绘制实心文字
- fillText(text,x,y)；
绘制空心文字
- strokeText(text,x,y)；

var canvas = document.getElementById('mycanvas');var context = canvas.getContext('2d');//绘制基准线context.beginPath();context.moveTo(10,100);context.lineTo(800,100);context.stroke();//绘制基线context.textBaseline = 'bottom';context.fillText('我爱前端',0,100);context.textBaseline = 'top';context.fillText('我爱前端1',50,100);
//    textBaseline 属性设置或返回在绘制文本时的当前文本基线。
//    alphabetic    默认。文本基线是普通的字母基线。
//    top   文本基线是 em 方框的顶端。
//    hanging   文本基线是悬挂基线。
//    middle    文本基线是 em 方框的正中。
//    ideographic   文本基线是表意基线。
//    bottom    文本基线是 em 方框的底端。//    textAlign 属性根据锚点，设置或返回文本内容的当前对齐方式。
//    start     默认。文本在指定的位置开始。
//    end   文本在指定的位置结束。
//    center    文本的中心被放置在指定的位置。
//    left  文本在指定的位置开始。
//    right     文本在指定的位置结束。context.beginPath();context.moveTo(150,10);context.lineTo(150,300);context.stroke();context.textAlign = 'center';context.fillText('我爱前端2',150,50);//设置文字样式context.font = 'bold 48px 微软雅黑';context.fillStyle = 'yellow';//写文字context.fillText('天气真好',250,100);

绘制其他不规则图形(创建路径)

绘制矩形

1.调用 beginPath() 方法，创建新建一条路径。
2.使用 rect(x, y, width, height) 方法，设置矩形的坐标值及宽度和高度。
- x和y 表示矩形的左上角坐标值。
- width和height 表示矩形的宽度和高度。
3.通过 fill() 或 stroke() 方法进行绘制。

绘制圆形

1.调用 beginPath() 方法，创建新建一条路径。
2.使用 arc(x, y, radius, startAngle, endAngle, anticlockwise) 方法，设置矩形的坐标值及宽度和高度。
- x和y 表示圆形的圆心坐标值。
- radius 表示圆形的半径。
- startAngle 表示绘制圆形的开始点，值为 0。
- endAngle 表示绘制圆形的结束点，值为 Math.PI*2。
- anticlockwise，表示是以顺时针还是以逆时针方式绘制圆形，Boolean值。（默认值为false，表示顺时针。）
3.通过 fill() 或 stroke() 方法进行绘制。

//动态冒泡小球的案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>html,body{margin: 0;}</style>
</head>
<body onload="init()" onresize="init()">
<canvas id="mycanvas"></canvas>
</body>
<script>function init() {//设置画布var canvas = document.getElementById('mycanvas');canvas.width = document.documentElement.clientWidth;canvas.height = document.documentElement.clientHeight;var context = canvas.getContext('2d');var width = canvas.width;var height = canvas.height;//创建小球构造函数function Ball(h) {this.x = Math.random()*(width-20)+10;this.y= h+20;this.red = parseInt(Math.random()*255);this.green = parseInt(Math.random()*255);this.blue = parseInt(Math.random()*255);this.globalAlpha = 1;//定义绘制小球的方法this.paint = function () {context.globalAlpha = this.globalAlpha;context.fillStyle = 'rgb('+this.red+','+this.green+','+this.blue+')';context.beginPath();context.arc(this.x,this.y,20,0,Math.PI*2,true);context.fill();}//定义小球动画方法this.num = Math.random();this.animate = function () {this.y = this.y-this.num;this.globalAlpha = this.globalAlpha - 0.001;}}//定义数组，将创建的小球都放入var balls = [];setInterval(function () {//创建小球对象，并且把创建好的小球都丢入数组中var ball = new Ball(height);balls.push(ball);},10)//设置动画，定时将小球移动，并且调整透明度setInterval(function () {context.clearRect(0,0,width,height);//遍历数组中的小球，每个小球调用两个方法。for(var i=0;i<balls.length;i++){if(balls[i].globalAlpha <= 0){balls.splice(i,1);}balls[i].paint();balls[i].animate();}},10)}
</script>
</html>

绘制弧形

类似圆形的绘制方式，只是第五个参数；
值得注意的是：
- 如果绘制的是空心弧形的话，在 arc() 方法调用后：
- 如果使用 closePath() 方法的话，绘制的图形会自动将终点和起点连接成线。
- 如果不用 closePath() 方法的话，绘制的图形会呈现开口状。

绘制直线

1.调用 beginPath() 方法，创建新建一条路径。
2.使用 moveTo(x, y) 方法，设置直线的起点坐标值。
3.使用 lineTo(x, y) 方法，设置直线的终点坐标值。
4.通过 stroke() 方法进行绘制。

绘制折线

1.调用 beginPath() 方法，创建新建一条路径。
2.使用 moveTo(x, y) 方法，设置直线的起点坐标值。
3.使用 lineTo(x, y) 方法，设置直线的终点坐标值。
4.通过 stroke() 方法进行绘制。

绘制多边形

1.调用 beginPath() 方法，创建新建一条路径。
2.使用 moveTo(x, y) 方法，设置直线的起点坐标值。
3.使用 lineTo(x, y) 方法，设置直线的终点坐标值。
4.调用 closePath() 方法，闭合当前绘制的路径。
5.通过 fill() 或 stroke() 方法进行绘制。

canvas给绘制的图形设置样式

设置样式

fillStyle：设置填充样式
strokeStyle：设置描边样式
globalAlpha：设置透明度(0-1)
值得注意的是：
- 一定要先设置样式(颜色)，再绘制图形。
- 每次改变样式(颜色),重新设置。

<canvas id="canvas" width="500px" height="500px"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
// a. 设置填充样式
context.fillStyle = "pink";
// b. 绘制实心矩形
context.fillRect(10,10,100,100);
// 设置描边样式
context.strokeStyle = "red";
context.strokeRect(120,10,100,100);
// 设置透明度
context.globalAlpha = 0.5;
context.fillRect(230,10,100,100);
context.fillStyle = "black";
context.globalAlpha = 0.1;
context.fillRect(230,120,100,100);
</script>

设置渐变

线性渐变：

createLinearGradient(x1,y1,x2,y2)
参数：
- x1和y1 基准线的起点坐标值
- x2和y2 基准线的终点坐标值

var c = document.getElementById('mycanvas');
var cxt = c.getContext('2d');
//设置渐变对象
var lg = cxt.createLinearGradient(10,10,300,300);
lg.addColorStop(0,'#FF6666');
lg.addColorStop(0.5,'#FFFF00');
lg.addColorStop(1,'#0066CC');
//设置绘制样式
cxt.fillStyle = lg;
//绘制图像
cxt.fillRect(10,10,300,300);

射线(扇形)渐变：

createRadialGradient(x1,y1,r1,x2,y2,r2)；

参数：

x1和y1 第一个基准圆的圆心；
r1 第一个基准圆的半径；
x2和y2 第二个基准圆的圆心；

r2 第二个基准圆的半径；

var c = document.getElementById('mycanvas');
var cxt = c.getContext('2d');
//    设置渐变对象
var lg = cxt.createRadialGradient(160,160,80,160,160,150);
lg.addColorStop(0,'#FF6666');
lg.addColorStop(0.5,'#FFFF00');
lg.addColorStop(1,'#0066CC');
cxt.fillStyle = lg;
cxt.fillRect(10,10,300,300);

设置渐变色

通过线性渐变对象的 addColorStop() 方法设置偏移量和颜色

设置线性渐变的颜色和位置
position - 设置颜色的位置

值的范围为 0 - 1，color - 设置颜色

//设置文字样式
context.font = 'bold 48px 微软雅黑';
context.fillStyle = 'yellow';
//设置阴影
context.shadowColor = 'red';
context.shadowBlur = 5;//模糊度
context.shadowOffsetX = -10;
context.shadowOffsetY = 10;
//写文字
context.fillText('天气真好',250,100);

设置阴影

shadowColor 设置阴影颜色。
shadowOffsetX 设置水平方向阴影。
shadowOffsetY 设置垂直方向阴影。
shadowBlur 设置阴影程度。

设置线性

设置线宽
- lineWidth ：指定线条粗细，默认值是1.0。

<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 15;
context.stroke();
</script>

设置端点形状
- lineCap ：指定线条端点形状。
  - butt：默认，向线条的每个末端添加平直的边缘。
  - round：向线条的每个末端添加圆形线帽。
  - square：向线条的每个末端添加正方向线帽。
  - round 和 square 会使线条略变微长。
设置交点形状
- lineJoin ：指定两条线之间的连接点形状。
  - round：创建圆角。
  - bevel：创建斜角
  - miter：默认，创建尖角

<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// set line width for all lines
context.lineWidth = 25;
// miter line join (left)
context.beginPath();
context.moveTo(99, 150);
context.lineTo(149, 50);
context.lineTo(199, 150);
context.lineJoin = 'miter';
context.stroke();
// round line join (middle)
context.beginPath();
context.moveTo(239, 150);
context.lineTo(289, 50);
context.lineTo(339, 150);
context.lineJoin = 'round';
context.stroke();
// bevel line join (right)
context.beginPath();
context.moveTo(379, 150);
context.lineTo(429, 50);
context.lineTo(479, 150);
context.lineJoin = 'bevel';
context.stroke();
</script>

canvas中绘制图像

获取图像几种方法：
- 使用相同页面中的图片；
- 使用相同页面中的其他canvas元素；
- 可以脚本通过Image()构造函数创建图像；
```
//引入一张外部图片
var img = new Image();
img.src = 'img/dahuangmao-05.png';
```

绘制图像

绘制图像：使用drawImage()方法绘制图像
```
 drawImage(image, x, y,width,height)
```
- 参数：其中 image 是上面获取并创建的image对象，x 和 y 是图片在目标 canvas 里准备放置的起始坐标，width和height是设置的绘制图像的宽度和高度。
```
context.strokeRect(0,0,128,128);
```
- 注意：若在绘制图像时图片还没加载完成，那什么都不会发生（在一些旧的浏览器中可能会抛出异常）。因此应该用load时间来保证不会在加载完毕之前使用这个图片。
```
img.onload = function () {
//绘制图片
//四个参数代表：引入图片的资源，图片放置的初始水平位置，图片放置的垂直位置，图片的宽度，图片的高度       
context.drawImage(img,0,0,128,128);}
```

平铺图像

平铺图像：将图片按照一定比例重复铺满整个规定区域；
- 1.引入图片并创建图片对象；
- 2.使用createPattern()，创建一个模式对象，来规定图片平铺模式；
  - 平铺方式（type）：
    - no-repeat ：不平铺；
    - repeat-x ：水平方向平铺；
    - repeat-y ：垂直方向平铺；
    - repeat ：全方向平铺；
- 3.将该模式对象设置成绘制图像的样式；
- 4.进行图像绘制；
```
//1、引入图片并创建图片对象
var imgvar img = new Image();
img.src = '图片路径';
img.onload = function () {// 2、创建平铺模型对象，设置图片的平铺方式var prn = context.createPattern(img,type);//3、将平铺对象设置为需要绘制的图形样式context.fillStyle = prn;//4、进行绘制context.fillRect(0,0,800,800);
}
```

切割图像

切割图像：按照一定方式对绘制的图形进行切割；

1.调用 beginPath() 方法，创建一条路径；
2.使用 rect() 或 arc() 方法，绘制切割后留下的形状；
3.通过 clip() 方法进行切割；

var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');//引入一张外部图片
var img = new Image();
img.src = 'img/dahuangmao-05.png';//创建新的路径，作为切割的形状
img.onload= function () {context.drawImage(img,0,0,300,300);
}
//进行切割
context.beginPath();
context.rect(50,50,50,50);
context.closePath();
context.clip();

canvas中的变形

可类比css3中的样式，注意：在canvas中的变形，操作的是画布，而非画布上的形状！

// 用canvas变形做出一个正方形旋转的动画练习 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>canvas {background-color: lightskyblue;}</style>
</head>
<body>
<canvas id="canvas" width="500px" height="300px"></canvas>
<script>var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');//将画布平移到原画布的中心位置，然后在此处画出一个矩形。context.translate(250,150);//注意此矩形的绘制原点在画布之外，所以设为矩形的父半宽和半高；context.strokeRect(-100,-100,200,200);//再绘制一条直线context.beginPath();context.moveTo(0,0);context.lineTo(0,100);context.stroke();//开启定时器，作出动画效果；setInterval(function () {context.clearRect(-500,-300,1000,600);//每次动一度context.rotate(Math.PI/180);//每动一度将矩形和直线重新绘制一遍context.strokeRect(-100,-100,200,200);context.beginPath();context.moveTo(0,0);context.lineTo(0,100);context.stroke();},10)
</script>
</body>
</html>

更多推荐

H5的canvas画布使用

本文发布于:2024-02-17 13:38:32，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1694210.html