本文详细介绍了HTML5 Canvas的图形绘制，包括绘制矩形的三种方式、路径绘制、线段、三角形、圆弧及贝塞尔曲线。此外，还讨论了样式和颜色的应用，如fillStyle和透明度控制。
首先canvas 只是一个容器元素，或者说提供一个画布，而真正绘制图片需要使用js脚本。
- 标签 <canvas> </canvas>
- canvas标签只有两个可选的属性 width height,如果不设置宽度和高度，默认是300*300；也可以通过css来设置宽高，但是可能会导致宽高和初始比例不一样，出现扭曲。
- 支持
<canvas>的浏览器会只渲染<canvas>标签，而忽略其中的替代内容。不支持<canvas>的浏览器则 会直接渲染替代内容。 -
<canvas> 当前浏览器不支持 </canvas>
绘制形状
<canvas>只支持一种原生的图形绘制：矩形，其他图形至少需要提供一种路径
绘制矩形的三种方式：
绘制一个填充的矩形
fillRect(x, y, width, height)
绘制一个边框矩形
strokeRect(x, y, width, height)
绘制以透明矩形---注意不能使画布变透明，而是在已有的填充区域使透明部分为矩形形状
clearRect(x, y, width, height)
这里面的参数x y width height 的说明：
（x,y）指的是矩形边框左上角的坐标，相当于是起点
width height 指的是你要绘制的矩形的宽高
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#canvas{
border: 1px solid red;
background-color: silver;
}
</style>
</head>
<body>
<canvas id="canvas" width="300px" height="300px"></canvas>
</body>
<script>
function draw1(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
//绘制矩形方式一 填充一个矩形
ctx.fillStyle = ('#bfa');
ctx.fillRect(10,10,30,40);
//方式二 绘制一个矩形边框
ctx.strokeRect(30,30,80,80);
//方式三 将一个矩形区域变得透明 ---- 不能将画布变得透明，是在填充了的区域变透明
ctx.clearRect(20,20,15,15);
}
draw();
</script>
绘制路径
路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
使用路径绘制图形的步骤
1、创建路径起始点
2、调用绘制方法绘制路径
3、闭合路径；
4、路径一旦闭合了，就可以描边或者填充图片。
需要使用到的方法：
beginPath();
新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
moveTo();
把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
lineTo();
从起始点开始，描绘一条直线
closePath();
闭合路径，之后图形绘制命令又重新指向到上下文中
strokePath();
通过线条来绘制路径轮廓
fill()
填充路径生成的区域形成实心图形
绘制一条线段
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#canvas{
border: 1px solid red;
background-color: silver;
}
</style>
</head>
<body>
<canvas id="canvas" width="300px" height="300px"></canvas>
</body>
<script>
function draw2(){
//绘制线段
var canvas = document.getElementById('canvas');
var ctx =canvas.getContext("2d");
ctx.beginPath(); //创建路径
ctx.moveTo(20,20); //将画笔的起点移到（20，20）坐标处
ctx.lineTo(80,80); //画笔从起点到（80，80）
ctx.closePath();
ctx.stroke(); //通过线条来绘制图形轮廓
}
draw2();
</script>绘制一个三角形
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#canvas{
border: 1px solid red;
background-color: silver;
}
</style>
</head>
<body>
<canvas id="canvas" width="300px" height="300px"></canvas>
</body>
<script>
function draw3(){
//绘制三角形
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(100,100);
ctx.closePath();
// ctx.stroke(); //描边
ctx.fill(); //填充这个闭合图形 默认黑色 如果path没有闭合，则fill()会自动闭合路径。
}
draw3();
</script>
绘制圆弧
绘制圆弧的两种方式：
方式一
arc(x, y, r, startAngle, endAngle, anticlockwise)
x, y 表示圆心的坐标；
r 表示圆弧半径
startAngle endAngle ：从startAngle 开始到 endAngle结束
这里的angle表示弧度，角度需要转换为弧度；公式： radians = (Math.PI) / 180 *degree
anticlockwise 布尔值，true 表示逆时针，false表示顺时针
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#canvas{
border: 1px solid red;
background-color: silver;
}
</style>
</head>
<body>
<canvas id="canvas" width="300px" height="300px"></canvas>
</body>
<script>
function draw4(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(60, 60, 40, 0, (Math.PI/180)*120, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(150, 50, 40, 0, -Math.PI/2, true);
ctx.closePath(); //使这段圆弧闭合
ctx.stroke();
ctx.beginPath();
ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2, false);
ctx.fill(); //填充这段圆弧构成的区域
ctx.beginPath();
ctx.arc(150, 150, 40, 0, Math.PI, false);
ctx.fill();
}
draw4();
</script>
方式二
arcTo(x1, y1, x2, y2, radius):
起始点由moveTo(x0,y0)决定
(x1,y1)表示控制点1 的坐标；(x2,y2)表示控制点2 的坐标。
两条切线决定一个圆弧
贝塞尔曲线
贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。
绘制二次贝塞尔曲线
quadraticCurveTo(cp1x, cp1y, x, y)
cp1x, cp1y 控制点坐标
x,y 结束点坐标
function draw5(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(10, 200); //起始点
var cp1x = 40, cp1y = 100; //控制点
var x = 200, y = 200; // 结束点
//绘制二次贝塞尔曲线
ctx.quadraticCurveTo(cp1x, cp1y, x, y);
ctx.stroke();
}
draw5();
绘制三次贝塞尔曲线
需要两个控制点
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
控制点1 控制点2 和结束点的坐标
function draw6(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(40, 200); //起始点
var cp1x = 20, cp1y = 100; //控制点1
var cp2x = 100, cp2y = 120; //控制点2
var x = 150, y = 200; // 结束点
//绘制二次贝塞尔曲线
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
ctx.stroke();
}
draw6();
样式和颜色
fillStyle 元素颜色填充，默认是黑色
function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
for (var i = 0; i < 6; i++){
for (var j = 0; j < 6; j++){
let a = Math.floor(255 - 30 * i);
let b = Math.floor(255 - 30 * j)
ctx.fillStyle = 'rgb(' + a + ',' + b + ',0)';
//下面这一行是设置颜色填充的区域
ctx.fillRect(j * 60, i * 60, 60, 60);
}
}
}
draw();效果：
strokeStyle 为绘制的区域添加边框 颜色也可以修改，跟fillStyle一样
Transparency(透明度)
影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0，当需要给画布中所有的图形设置相同的透明度，就用这个。
lineStyle 线条样式
扫一扫
6589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
