<canvas></canvas> 标签定义图形，比如图表和其他图像;它只是图形容器，您必须使用脚本来绘制图形。
所以使用canvas,主要是写很多javaScript来实现它的功能.
使用canvas,首先要定义canvas画布在body里面的范围:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas介绍</title> 6 </head> 7 <body> 8 9 <canvas width="600" height="800" style="background: yellow" id="canvas"> 10 您的浏览器版本不支持canvas标签 11 </canvas> 12 </body> 13 </html>
在这里width是画布的宽,height是画布的高,style是画布的样式,id即是canvas的表示,方便javaScript获取DOM对象.
在这里主要讲一下基本的图形画法:
<script>
//获取画布的DOM, canvas还不可以操作
var canvas = document.getElementById(‘canvas‘);
//设置绘图环境,2d是一个标准
var cxt = canvas.getContext(‘2d‘);
//画一条线段
//设定画笔的宽度
cxt.lineWidth = 10;
//画笔的颜色
cxt.strokeStyle = "#ff9900";
//有一个开始的位置,需要一个坐标,(20,20)表示左上角往有数20,往下数20
cxt.moveTo(20,20);
//设置划线的方式,需要一个坐标,横线是x改变,y不变,竖线是x不变,y改变
cxt.lineTo(100,20);
cxt.stroke();
//封闭路径
cxt.closePath();
//画一个圆型,凡是路径图形必须先开始路径,画完之后必须结束路径
// 第一个和第二个参数是圆心的坐标点,
// 第三个参数是半径,
// 第四个和第五个参数是表示范围,如果是半圆就是0到180,整圆就是0到360
// 最后一个是表示是顺时针还是逆时针,false表示逆时针,true表示顺时针
cxt.beginPath();
cxt.lineWidth = 3;
cxt.strokeStyle = ‘red‘;
cxt.arc(200,200,50,0,360,false);
cxt.stroke();
cxt.closePath();
//画一个实心圆
cxt.beginPath();
cxt.fillStyle = ‘blue‘;
cxt.arc(200,80,50,0.360,false);
cxt.fill();
cxt.stroke();
cxt.closePath();
//画一个矩形(不需要开始和结束路径)
cxt.rect(300,20,100,100);
cxt.stroke();
//其他方法
cxt.strokeRect(300,150,100,100);
//实心矩形
cxt.beginPath();
cxt.rect(300,380,100,100);
cxt.fill();
cxt.closePath();
//其他方法
cxt.fillRect(420,380,100,100);
//设置文字
cxt.font = "40px 黑体";
cxt.fillText("这是一个字符串",20,300);
cxt.lineWidth = 1;
//在这里设置空心字 cxt.strokeText("这是一个字符串",20,350);
//画图,把一幅图片画到画布
var img= new Image();
img.src = "";
cxt.drawImage(img,20,370,230,306);
//画一个三角形,可以根据自己的需要设置坐标,画三角形的话必须要先关闭路径,再画图
cxt.beginPath();
cxt.moveTo(350,500);
cxt.lineTo(320,600);
cxt.lineTo(500,600);
cxt.closePath();
cxt.stroke();
</script>
时间： 2024-08-07 04:31:25