基本的画布功能
不要在style里面设置width和height(可能会出现位置坐标不准的问题),直接设置canvas的属性就好,不用设定 canvas也有默认的宽和高
<canvas id="drawing" width="300" height="150" style="border:1px solid #d3d3d3;">
</canvas>
要想在画布上绘制图形,首先要获取绘图上下文。使用getContext()方法可以获取绘图上下文的引用。对于平面图形,传入2d即可。
let drawing = document.getElementById('drawing')
if(drawing.getContext){
let context = drawing.getContext('2d')
}
多个图操作,用beginPath() 和closePath() 形成一个封闭的区块
let drawing = document.getElementById('drawing');
if (drawing.getContext) {
let context = drawing.getContext('2d');
context.beginPath();
context.moveTo(0, 0);
context.lineTo(500, 500);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(500, 0);
context.lineTo(0, 500);
context.closePath();
//绘制
context.stroke();
}
stroke() 绘制已定义的路径
2D绘图上下文
原点为canvas图像左上角(0,0)
颜色、样式和阴影
strokeStyle:描边
fillStyle: 设置或返回用于填充绘画的颜色、渐变或模式
fill() :填色绘制
if (drawing.getContext) {
let context = drawing.getContext('2d');
context.beginPath();
context.moveTo(0, 0);
context.lineTo(500, 500);
context.lineTo(500, 0);
context.lineTo(0, 0);
context.strokeStyle = 'blue '
context.fillStyle = 'red'
context.fill()
context.stroke();
}
shadowColor 设置或返回用于阴影的颜色
shadowBlur 设置或返回用于阴影的模糊级别
shadowOffsetX 设置或返回阴影距形状的水平距离
shadowOffsetY 设置或返回阴影距形状的垂直距离
变换
translate( x , y ):变换原点,用save(),和restore()保存原有原点,并恢复
rotate( angle ) :围绕圆点进行旋转angle弧度,正值表示顺时针方向旋转,负值表示逆时针方向旋转
ctx.beginPath();
ctx.save()
ctx.translate(100,100)
ctx.rotate(30)
ctx.fillStyle="red"
ctx.fillRect(0,0,100,200);
ctx.closePath();
ctx.restore()
ctx.stroke();
提示:如需把角度转换为弧度,请乘以 Math.PI 并除以 180
矩形
fillStyle : 颜色属性。这个属性要写在fillRect()方法之前
fillRect():绘制矩形,单位像素,默认实心黑色
x坐标,y坐标 ,宽度,长度
context.beginPath();
context.fillStyle = 'rgba(0,0,255,0.5)'
context.fillRect(10,20,100,100,)
context.stroke();
context.beginPath();
lineWidth:描边宽度属性,任意数值
strokeRect(): 绘制矩形(无填充)
给它填充颜色是没有用的,只是边框
context.beginPath();
context.strokeRect(200,200,100,100)
context.closePath();
//绘制
context.stroke();
clearRect():可以擦除画布中的某个区域,变得透明。
context.beginPath();
context.clearRect(200,200,100,100)
context.closePath();
//绘制
context.stroke();
路径
moveTo( x , y ):不绘制线条,只把绘制起点移动到( x , y )
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点,然后在画布中创建从该点到最后指定点的线条
例:
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
//描画路径,如果下面有更改描述,则需再次执行stroke()或者在stroke()执行之前进行描述
ctx.stroke();
</script>
arc():用来绘制圆弧
x , y , radius , startAngle , endAngle , counterclockwise( 表示是否逆时针,默认逆时针(true))
context.beginPath();
context.arc(0,0,100,0,90,false)
context.closePath();
//绘制
context.stroke();
arcTo():创建两切线之间的弧/曲线
需要一个起点,端点一p1,端点二p2
p1.x , p1.y , p2.x , p2.y ,radius
//指定绘制路径的起始点
ctx.moveTo(50, 50);
//绘制一条到坐标(150,50)的水平直线
ctx.lineTo(150, 50);
//坐标点(150,50)就是绘制弧线时的当前端点
//端点1
var p1 = {
x : 200,
y : 50
};
//端点2
var p2 = {
x : 200,
y : 100
};
//绘制与当前端点、端点1、端点2三个点所形成的夹角的两边相切并且半径为50px的圆的一段弧线
ctx.arcTo(p1.x, p1.y, p2.x, p2.y, 50);
//设置线条颜色为蓝色
ctx.strokeStyle = "blue";
//按照上述绘制路径绘制弧线
ctx.stroke();
由于在使用arcTo()绘制弧线时,“画笔”所在的端点为(150,50),所以坐标点(150,50)就是当前端点,接着我们在arcTo()方法的参数中指定了端点1(200,50)和端点2(200,100),因此arcTo()将绘制出与这三个端点所形成的夹角的两边相切、并且半径为50px的圆上的一段弧线。此外,夹角两边与圆相切的两个切点,将圆分成了两段圆弧,一段就是上图绘制出来的1/4圆弧,一段则是剩下的3/4圆弧,由于arcTo()将会沿着最短圆弧的方向绘制弧线,所以绘制出来的弧线就是较短的1/4圆弧(原文地址:原文)
bezierCurveTo(c1x , c1y , c2x , c2y , x , y) :以( cx , cy )为控制点,绘制一条从上一点到( x , y )的弧线(三次贝塞尔曲线)
文本
fillText()
在画布上绘制“被填充的”文本
ctx.fillText('hello world',100,100);