一、绘制直线
<!DOCTYPE html> <html lang="en"> <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>canvas</title> </head> <body> <canvas id="myCanvas" width="200" height="200" style="border:1px solid #753838;">您的浏览器不支持HTML5 canvas</canvas> </body> <script> <!-- 获取绘制元素--> var c = document.getElementById("myCanvas"); //获取cavas绘制上下文 var ctx = c.getContext("2d"); //设置直线起点 //定义开始坐标 ctx.moveTo(0, 0); //定义结束坐标 ctx.lineTo(200, 200) //设开始绘制 ctx.stroke(); </script> </html>
二、绘制多条直线(线帽)
<!DOCTYPE html> <html lang="en"> <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>canvas</title> </head> <body> <canvas id="myCanvas" width="200" height="200" style="border:1px solid #753838;">您的浏览器不支持HTML5 canvas</canvas> </body> <script> <!-- 获取绘制元素--> var c = document.getElementById("myCanvas"); //获取cavas绘制上下文 var ctx = c.getContext("2d"); //开始绘制 ctx.beginPath(); //设置线宽 ctx.lineWidth = 10; //设置联调端点样式，默认值添加平直边缘 ctx.lineCap = "butt"; //设置起点 ctx.moveTo(20, 20); //设置终点 ctx.lineTo(180, 20) //绘制 ctx.stroke(); ctx.beginPath(); //设置联调端点样式，添加圆形边缘 ctx.lineCap = "round"; ctx.moveTo(20, 40); ctx.lineTo(180, 40); ctx.stroke(); ctx.beginPath(); //设置联调端点样式，添加方形边缘 ctx.lineCap = "square"; ctx.moveTo(20, 60); ctx.lineTo(180, 60); ctx.stroke(); </script> </html>
三、绘制复杂图形
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>canvas</title> <script> function draw(id) { var canvas = document.getElementById(id); //获取canvas上下文 var context = canvas.getContext("2d"); //设置绘图区域颜色 context.fillStyle = "#eeeeef"; //绘制矩形 context.fillRect(0, 0, 300, 400); var dx = 150; var dy = 150; var s = 100; //开始绘图 context.beginPath(); // 设置绘图区域颜色 context.fillStyle = 'rgb(100,255,100)'; // 设置线条颜色 context.strokeStyle = "rgb(0,0,100)"; var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 15 * 11; //不断旋转绘制直线 for (var i = 0; i < 30; i++) { var x = Math.sin(i * dig); var y = Math.cos(i * dig); context.lineTo(dx + x * s, dy + y * s); } context.closePath(); context.fill(); context.stroke(); } </script> </head> <body onload="draw('canvas')"> <canvas id="canvas" width="300" height="400"></canvas> </body> </html>
四、绘制矩形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> </body> <script> <!-- 获取绘制元素--> var c=document.getElementById("myCanvas"); //获取canvas上下文 var ctx=c.getContext("2d"); //定义矩形起点和宽高 ctx.rect(20,20,150,100); //绘制矩形 ctx.stroke(); </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> </body> <script> <!-- 获取绘制元素--> var c = document.getElementById("myCanvas"); //获取canvas上下文 var ctx = c.getContext("2d"); // 设置绘图区域颜色 ctx.fillStyle = 'rgb(112,206,57)'; //定义矩形起点和宽高,并绘制 ctx.fillRect(20, 20, 150, 150); </script> </html>
五、绘制弧线
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>canvas</title> </head> <body> <canvas id="myCanvas" width="400" height="400"></canvas> </body> <script> <!-- 获取绘制元素--> var canvas = document.getElementById("myCanvas"); //获取绘制上下文 var context = canvas.getContext("2d"); //开始绘制 context.beginPath(); // 设置线条颜色 context.strokeStyle = 'rgb(206,70,28)'; //绘制圆，设置圆心坐标，半径40，起始弧度，结束弧度 context.arc(100, 100, 40, 0, 0.5 * Math.PI); context.stroke(); //开始绘制 context.beginPath(); // 设置线条颜色 context.strokeStyle = 'rgb(236,210,44)'; //绘制圆，设置圆心坐标，半径40，起始弧度，结束弧度 context.arc(200, 100, 40, 0, 1 * Math.PI); context.stroke(); //开始绘制 context.beginPath(); // 设置线条颜色 context.strokeStyle = 'rgb(36,152,148)'; //绘制圆，设置圆心坐标，半径40，起始弧度，结束弧度 context.arc(100, 200, 40, 0, 1.5 * Math.PI); context.stroke(); //开始绘制 context.beginPath(); // 设置线条颜色 context.strokeStyle = 'rgb(15,18,217)'; //绘制圆，设置圆心坐标，半径40，起始弧度，结束弧度 context.arc(200, 200, 40, 0, 2 * Math.PI); context.stroke(); </script> </html>
六、绘制复杂圆形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body onload="draw('myCanvas')"> <canvas id="myCanvas" width="300" height="400"></canvas> </body> <script> function draw(id) { var canvas = document.getElementById(id); if (canvas == null) { return false; } var ctx = canvas.getContext("2d"); //设置填充颜色 ctx.fillStyle="rgb(94,83,83)"; ctx.fillRect(0,0,600,700); for (var i = 0; i < 10; i++) { //开始创建路径 ctx.beginPath(); //创建路径图形 ctx.arc(i*25,i*25,i*10,0,Math.PI*2,true); //关闭路径 ctx.closePath(); //设置填充样式 ctx.fillStyle="rgba(255,0,0,0.25)"; //填充 ctx.fill(); } } </script> </html>
cavans图形绘制(直线、矩形、原型、贝塞尔曲线、渐变背景) 2：https://developer.aliyun.com/article/1547220
