使用Canvas时要使用<canvas></canvas>标签来定义一个画布。
但是在canvas上绘制各种东西,则需要javascript来实现。画布仅仅提供的是一个绘制的场所。
其width,height属性可以设置其水平方向的宽度和垂直方向的高度。
其中fillStyle属性,可以是CSS颜色,渐变,或者图案,其默认颜色为黑色。
画矩形:
调用方法:fillRect(x,y,width,height)
其中x,y是左上角坐标,width是矩形水平方向的宽度,height是矩形垂直方向的高度。单位都是像素。
<!doctype html>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid red;">
</canvas>
<script type="text/javascript">
//先找到canvas元素
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20,20,200,200);
//var img = new Image();
//img.src = "mystar.jfif";
//ctx.drawImage(img,0,0);
</script>
</body>
</html>
画线条:moveTo(x,y)定义线条开始坐标 ,lineTo(x,y)设置结束坐标,stroke()画线条方法。
<!doctype html>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid red;">
</canvas>
<script type="text/javascript">
//先找到canvas元素
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(20,20);
ctx.lineTo(200,200);
ctx.stroke();
</script>
</body>
</html>
画圆:arc(x,y,r,start,stop)
x:圆心在x轴上的坐标
y:圆心在y轴上的坐标
r:半径长度。
start,起始角度,以弧度表示,圆心平行的右端为0度。
Stop:结束角度,以弧度表示。
Math.PI表示180度,画圆的方向是顺时针方向。!doctype html>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid red;">
</canvas>
<script type="text/javascript">
//先找到canvas元素
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(200,200,150,0,Math.PI);
ctx.stroke();
</script>
</body>
</html>
canvas绘制文本:
属性: font 定义字体。
FillText(text,x,y) 再canvas上绘制实心的文本
StrokeText(text,x,y) 再canvas上绘制空心的文本
<!doctype html>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid red;">
</canvas>
<script type="text/javascript">
//先找到canvas元素
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "50px Plain";
ctx.fillText("Hello World",100,100);
ctx.strokeText("Hello World",100,200);
</script>
</body>
</html>
canvas渐变:渐变可以填充矩形,线条和文本等等。
CreateLinearGradient(x,y,x1,y1) – 创建线条渐变
CreateRadialGradient(x,y,r,x1,y1,r1) – 常见一个径向/圆渐变。
X:渐变的开始圆的x坐标
Y:渐变的开始圆的y坐标
r:开始圆的半径。
X1:渐变的结束圆的x半径
Y1:渐变的结束圆的y半径
AddColorStop()方法指定颜色停止,参数使用坐标来描述。使用渐变,
设置fillStyle 或 strokeStyle的值为渐变。然后绘制形状。
<!doctype html>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid red;">
</canvas>
<script type="text/javascript">
//先找到canvas元素
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0,0,300,0);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"red");
ctx.fillStyle = grd;
ctx.font = "50px Plain";
ctx.fillText("Hello World",100,100);
ctx.strokeText("Hello World",100,200);
</script>
</body>
</html>
绘制图片:
drawImage(image,x,y)
<!doctype html>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="1000" height="800" style="border:1px solid red;">
</canvas>
<script type="text/javascript">
//先找到canvas元素
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "mystar.jfif";
ctx.drawImage(img,0,0);
</script>
</body>
</html>