h5的canvas画布常用方法
2017-07-01 10:46
218 查看
首先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。
//绘制圆形
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'; //模糊颜色
Ø 语法：context.scale(scalewidth,scaleheight)
n scalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
n scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)
Ø 注意：缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。
Ø 语法：context.translate(x,y)
n x： 添加到水平坐标（x）上的值
n y： 添加到垂直坐标（y）上的值
Ø 注意：发生位移后，相当于把画布的0,0坐标 更换到新的x,y的位置，所有绘制的新元素都被影响。
Ø 语法：context.rotate(angle)
n angle： 参数是弧度（PI）
注意：如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。
Ø context.restore() 返回之前保存过的路径状态和属性(获取最近缓存的ctx)
注意：一般配合位移画布使用。
n number:透明值。必须介于 0.0（完全透明)与 1.0（不透明） 之间。
注意：设置透明度是全局的透明度的样式。注意是全局的。
</script>
</html>
下面用一个例子介绍；
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android 游戏开发之Canvas画布的介绍及方法
- h5 canvas画布、setInterval定时器、addEventListener事件
- H5的canvas画布使用
- Android中Canvas的常用方法总结
- JavaScript html5 canvas画布中删除一个块区域的方法
- h5中的画布----Canvas
- JavaScript html5 canvas画布中删除一个块区域的方法
- HTML5 Canvas 开发 绘图方法整理 【十四、将 Canvas画布 作为图片保存并下载】
- Canvas的基本使用——常用的绘制方法介绍
- H5的canvas画布使用
- 自定义控件入门1-paint与canvas常用的方法介绍
- Canvas的基本使用——常用的Api方法（2）：clip*裁剪方法
- H5网页Canvas画布绘图 图片文字合成
- android 游戏 Canvas 常用方法
- Android Paint和Canvas常用方法和效果
- H5的canvas画布使用
- Android中一些常用类的常用方法（Math、Random、Color、Paint、Canvas、Bitmap、BitmapFactory）
- WebView常用方法详解及h5新特性
- H5的canvas画布使用
- android之Canvas浅谈常用几个方法