Canvas记录01

技术2023-10-11 80

Canvas记录01

实现基本绘图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin:0; padding:0; } #canvas{ background:yellowgreen; } </style> </head> <body> <canvas id="canvas" width=700 height=600></canvas> <script> /*画布*/ const canvas = document.querySelector('#canvas') // canvas.width = 300 // canvas.height = 150 canvas.width = window.innerWidth canvas.height = window.innerHeight /*画笔*/ const ctx = canvas.getContext('2d') //3d画笔 //const ctx = canvas.getContext('webgl') /* 红色的填充矩形 */ /*填充色*/ ctx.fillStyle = 'red' /*50，100 顶点坐标 400 200 宽，高*/ ctx.fillRect(50,50,400,200) /*尽量将画布尺寸控制在4000以内*/ /*描边的宽度*/ ctx.lineWidth = 40; /*绘制描边矩形*/ ctx.strokeRect(50,50,400,200) /*描边会分别向内外偏移50%，清理矩形内描边不在了外描边还在*/ /*清理矩形*/ ctx.clearRect(50,50,400,200) </script> </body> </html>

实现路径图形

*** 绘制路径图形 * 1直线 lineTo(x,y) * 2圆弧 arc(X,Y,半径，开始弧度，结束弧度，方向) * 3切线圆弧 arcTo(X1,Y1,X2,Y2,半径) * 二次贝塞尔曲线 quadraticCurveTo(cpx1,cpy1,x1,y1) * 三次贝塞尔曲线 bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x1,y1) * 矩形 rect(x,y, w,h)** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin:0; padding:0; } #canvas{ background:yellowgreen; } </style> </head> <body> <canvas id="canvas" width=700 height=600></canvas> <script> /*画布*/ const canvas = document.querySelector('#canvas') canvas.width = window.innerWidth canvas.height = window.innerHeight /*画笔*/ const ctx = canvas.getContext('2d') ctx.lineWidth = 10 /*描边颜色*/ ctx.strokeStyle='gray' /**** 直线 */ // ctx.lineWidth = 10 /* 设置线宽 */ // ctx.fillStyle = 'yellow' /* 设置填充色 */ // ctx.beginPath() /* 启动绘画 */ // ctx.moveTo(50,50) /* 设置起点 */ // ctx.lineTo(400,50) /* 直线1去的位置 */ // ctx.lineTo(400,300) /* 直线2去的位置 */ // ctx.closePath() /* 设置闭合路径 */ // ctx.stroke() /* 设置描边不描看不见 */ // ctx.fill() /* 设置填充 */ /**** 圆弧默认起始点是圆心水平右侧半径处*/ // ctx.beginPath() /* 启动绘画 */ // ctx.arc( /* 绘制圆弧方法 arc */ // 300,300, /* 起点 x,y */ // 200, /* 设置半径 */ // 0,Math.PI*3/2 /* 起始弧度终止弧度 */ // /* true */ /* 方向不设置为默认方向顺时针，设置为true 变为逆时针取反方向 */ // ) // ctx.moveTo(500,500) /* 画第二个弧度时，将起始点移动到目标处否则会变成闭合路径 */ // ctx.arc( // 300,500, // 200, // 0,Math.PI*3/2 // ) // ctx.stroke() /**** 切线圆弧 */ // ctx.beginPath() // ctx.moveTo(50,50) // ctx.arcTo(400,50,400,300,100) // ctx.stroke() /**** 二次贝塞尔曲线 */ // ctx.beginPath() // ctx.moveTo(50,50) // ctx.quadraticCurveTo(400,50,400,300) /* 400,50 控制点 400，300 终点 */ // ctx.stroke() /* 三次贝塞尔曲线 */ // ctx.beginPath() // ctx.moveTo(50,50) // ctx.bezierCurveTo(400,50,400,300,800,300) // ctx.stroke() /**** 矩形内置了moveto 不用moveto*/ ctx.beginPath() ctx.rect(50,50,300,100) ctx.rect(50,350,300,100) ctx.stroke() /** * 绘制路径图形 * 1直线 lineTo(x,y) * 2圆弧 arc(X,Y,半径，开始弧度，结束弧度，方向) * 3切线圆弧 arcTo(X1,Y1,X2,Y2,半径) * 二次贝塞尔曲线 quadraticCurveTo(cpx1,cpy1,x1,y1) * 三次贝塞尔曲线 bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x1,y1) * 矩形 rect(x,y, w,h) * * * */ </script> </body> </html>

小案例01 — 机器人

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin:0; padding:0; } #canvas{ background:yellowgreen; } </style> </head> <body> <canvas id="canvas" ></canvas> <script> /*画布*/ const canvas = document.querySelector('#canvas') // canvas.width = 300 // canvas.height = 150 canvas.width = window.innerWidth canvas.height = window.innerHeight /*画笔*/ const ctx = canvas.getContext('2d') ctx.fillStyle='red' ctx.lineWidth = 40 /*机器人面部*/ ctx.fillRect(50,250,400,200) /*机器人描边*/ ctx.strokeRect(50,250,400,200) /*机器人眼罩*/ ctx.clearRect(50,300,400,60) /*机器人嘴巴*/ ctx.beginPath() ctx.moveTo(150,400) ctx.lineTo(350,400) ctx.stroke() /*机器人眼睛*/ /*左眼 */ ctx.beginPath() ctx.arc( 150,330, 20, 0,Math.PI * 2 ) ctx.fill() /* 右眼 */ ctx.beginPath() ctx.arc( 350,340, 20, 0,Math.PI, true ) ctx.fill() /*天线三次贝塞尔曲线*/ ctx.beginPath() ctx.moveTo(50,50) ctx.bezierCurveTo( 150,50, 150,250, 250,250 ) ctx.stroke() ctx.moveTo(450,50) ctx.bezierCurveTo( 350,50, 350,250, 250,250 ) ctx.stroke() </script> </body> </html>

输出图形

小案例02 — 水滴

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin:0; padding:0; } #canvas{ background:yellowgreen; } </style> </head> <body> <canvas id="canvas" ></canvas> <script> /*画布*/ const canvas = document.querySelector('#canvas') // canvas.width = 300 // canvas.height = 150 canvas.width = window.innerWidth canvas.height = window.innerHeight /*画笔*/ const ctx = canvas.getContext('2d') ctx.translate(300,300) // 移动画布 //ctx.fillStyle='red' //ctx.lineWidth = 40 ctx.fillStyle = 'blue' ctx.beginPath() ctx.moveTo(0,0) //使用原点（0，0）作为起始点方便对称 ctx.quadraticCurveTo(50,-50,50,-100) ctx.arc(0,-100,50,0,Math.PI,true) ctx.quadraticCurveTo(-50,-50,0,0) ctx.fill() /* 实现思路二次贝塞尔曲线 + 圆弧 + 二次贝塞尔曲线 */ </script> </body> </html>

输出图形

Processed: 0.012, SQL: 9