h5的canvas画布常用方法

最新推荐文章于 2024-04-19 10:18:52 发布

羽湘楚

最新推荐文章于 2024-04-19 10:18:52 发布

阅读量2.4k

点赞数 1

文章标签：面向对象前端 javascript canvas

本文链接：https://blog.csdn.net/weixin_38337068/article/details/74033838

版权

首先canvas是有默认的宽度和高度，不可以在CSS样式中设置高端和宽度，否则会按照比例来缩放，一般都是在JS中设置宽度和高度；

下面用一个例子介绍；

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background:#303B52;
}
canvas{
background: white;
/*width: 500px;
height: 500px;*/
/*不能在这里加，因为会默认帮你比例,因此在JS里赋予*/

}
</style>
</head>
<body>
<canvas id="bd">
<span>sf</span>
</canvas>
</body>
<script>
var sg=document.querySelector('#bd');
sg.width=400;
sg.height=400;
var ge=sg.getContext('2d');
//绘制矩形
ge.fillStyle='red'; //填充颜色
ge.fillRect(50,50,100,100); //x y轴坐标宽度高度默认黑色
ge.strokeStyle='blue';//边框的颜色
ge.lineWidth='5'; //边框的大小
ge.strokeRect(50.5,50.5,100,100); //边框
//绘制路径
ge.beginPath();//开始执行
ge.moveTo(100,100); //开始的位置
ge.lineTo(200,200);//第二个位置
ge.lineTo(150,300);//第三个位置
ge.closePath();//起点到终点的连接闭合
ge.stroke();//绘制一条线
ge.lineWidth='5'; //边框的大小
ge.strokeStyle='brown';//边框的颜色
ge.lineCap='round'; //线的断点样式,round为圆角,spuare 出来的长度为宽度一半10px。

//绘制圆形

制圆弧（arc）（重点）

· 概述：arc() 方法创建弧/曲线（用于创建圆或部分圆）。

o 语法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);

o 解释：

x,y：圆心坐标。

r：半径大小。

sAngle:绘制开始的角度。圆心到最右边点是0度，顺时针方向弧度增大。

eAngel:结束的角度，注意是弧度。π

counterclockwise：是否是逆时针。true是逆时针，false：顺时针

弧度和角度的转换公式： rad = deg*Math.PI/180;

在Math提供的方法中sin、cos等都使用的弧度

ge.arc(200,200,150,0,-360*Math.PI/180,true);
ge.stroke(); 连成线

ge.moveTo(200,200);
ge.arc(200,200,150,90*Math.PI/180,90*Math.PI/180,false);
ge.stroke(); 连成线

//渐变色
var grd=ge.createLinearGradient(150,100,150,300); //起点坐标终点坐标
grd.addColorStop(0,'red'); //位置和颜色
grd.addColorStop(0.5,'green');
grd.addColorStop(1,'blue');

ge.fillStyle=grd;
ge.fillRect(100,100,200,200);

//文字

ge.fillStyle='red';//内容颜色
ge.lineWidth=2;//描边大小
ge.strokeStyle='blue';//改变描边颜色
ge.font='60px 宋体';//改变样式
ge.textBaseline='top';//改变基点
ge.fillText('文字在干吗',0,0);//填写内容坐标位置
ge.strokeText('文字',0,0);//描边填写哪个就描边哪个坐标位置

ge.shadowOffsetX=10; //x轴坐标
ge.shadowOffsetY=10; //y轴坐标
ge.shadowBlur=1; //模糊宽度
ge.shadowColor='#d8d8d8'; //模糊颜色

3.4 变换（重点）

3.4.1 缩放（重点）

Ø scale() 方法缩放当前绘图，更大或更小

Ø 语法：context.scale(scalewidth,scaleheight)

n scalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)

n scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)

Ø 注意：缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。

3.4.2 位移画布（重点）

Ø translate() 方法重新映射画布上的 (0,0) 位置

Ø 语法：context.translate(x,y)

n x：添加到水平坐标（x）上的值

n y：添加到垂直坐标（y）上的值

Ø 注意：发生位移后，相当于把画布的0,0坐标更换到新的x,y的位置，所有绘制的新元素都被影响。

3.4.3 旋转（重点）

Ø rotate() 方法旋转当前的绘图

Ø 语法：context.rotate(angle)

n angle：参数是弧度（PI）

注意：如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。

3.4.4 绘制环境保存和还原（重要）

Ø context.save() 保存当前环境的状态（可以把当前绘制环境进行保存到缓存中）

Ø context.restore() 返回之前保存过的路径状态和属性(获取最近缓存的ctx)

注意：一般配合位移画布使用。

3.4.5 设置绘制环境的透明度（了解）

Ø context.globalAlpha=number;

n number:透明值。必须介于 0.0（完全透明)与 1.0（不透明）之间。

注意：设置透明度是全局的透明度的样式。注意是全局的。

</script>
</html>

羽湘楚

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
h5的canvas画布常用方法

首先canvas是有默认的宽度和高度，不可以在CSS样式中设置高端和宽度，否则会按照比例来缩放，一般都是在JS中设置宽度和高度；下面用一个例子介绍；body{background:#303B52;}canvas{background: white;/*width: 500px;height: 500px;*//*不能在这里加，因为会默认帮你比
复制链接

扫一扫