做网站点击量有用吗,长沙网站seo排名,wordpress去除右下角,加快建设企业门户网站建文章目录 ⭐前言⭐基本用法#x1f496;设置一个 canvas 2D 上下文#x1f496;绘制矩形常用方法属性#x1f496;绘制一个红蓝交替的矩形 #x1f496;绘制路径常用方法属性#x1f496;画一个点#x1f496;画一条线#x1f496;画一个三角形面#x1f496;画一个笑脸… 文章目录 ⭐前言⭐基本用法设置一个 canvas 2D 上下文绘制矩形常用方法属性绘制一个红蓝交替的矩形 绘制路径常用方法属性画一个点画一条线画一个三角形面画一个笑脸用贝塞尔曲线画一个爱心 ⭐总结⭐结束 ⭐前言
大家好我是yma16本文分享web canvas系列——快速入门画二维点、线、面。 前端canvas 前端中的Canvas是HTML5中新增的一个元素它允许我们直接通过JavaScript来绘制图形、动画和其他可视化效果。Canvas提供了一个画布我们可以在上面绘制各种形状、图像和文本。
使用Canvas的步骤如下
在HTML文件中添加一个Canvas元素canvas idmyCanvas/canvas在JavaScript中获取Canvas元素const canvas document.getElementById(myCanvas);获取Canvas的绘图上下文const context canvas.getContext(2d);使用上下文对象绘制图形、图像和文本。
Canvas的绘图上下文提供了一系列的绘制方法如绘制矩形、圆形、线条等。可以通过设置上下文的属性如颜色、线宽等来调整绘制效果。
通过使用JavaScript来操作Canvas我们可以实现各种动态的效果如动画、图表、游戏等。同时可以通过监听用户的鼠标、键盘事件来实现与用户的交互。
需要注意的是Canvas绘制的内容是在像素级别上进行的所以对于不同屏幕分辨率的设备我们需要进行适配使绘制的内容在不同设备上保持一致。
⭐基本用法
在inscode创建一个html环境用于调试 canvas 是一个二维网格。它的左上角坐标为 (x0,y0)
设置一个 canvas 2D 上下文
元素可以像任何一个普通的图像一样有marginborderbackground等等属性被设计。然而这些样式不会影响在 canvas 中的实际图像。 定义一个 canvas对象注意/canvas结尾标签不可省
canvas idtutorial width150 height150/canvasjs打印他的对象实例
function draw() {var canvas document.getElementById(tutorial);if (canvas.getContext) {var ctx canvas.getContext(2d);console.log(ctx,ctx)}else{console.log(不支持canvas)}
}window.onload () {draw()
}可以查看其中的属性 canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
绘制矩形常用方法属性
属性用法fillStyle(color)填充颜色参数为颜色值fillRect(x,y,width,height)绘制矩形参数矩形左上角x,y坐标和矩形的宽高strokeRect(x, y, width, height)绘制矩形边框clearRect(x, y, width, height)清除指定矩形区域让清除部分完全透明
内部完成
绘制一个红蓝交替的矩形
使用fillRect画出矩形fillStyle 填充颜色
function draw() {var canvas document.getElementById(tutorial);if (canvas.getContext) {var ctx canvas.getContext(2d);console.log(ctx, ctx)ctx.fillStyle rgb(200,0,0);ctx.fillRect(10, 10, 55, 50);ctx.fillStyle rgba(0, 0, 200, 0.5);ctx.fillRect(30, 30, 55, 50);}else {console.log(不支持canvas)}
}效果如下
绘制路径常用方法属性
属性用法beginPath()新建一条路径生成之后图形绘制命令被指向到路径上生成路径closePath()闭合路径之后图形绘制命令又重新指向到上下文中stroke()通过线条来绘制图形轮廓fill()通过填充路径的内容区域生成实心的图形。lineTo(x, y)绘制一条从当前位置到指定 x 以及 y 位置的直线。arc(x, y, radius, startAngle, endAngle, anticlockwise)画一个以x,y为圆心的以 radius 为半径的圆弧圆从 startAngle 开始到 endAngle 结束按照 anticlockwise 给定的方向默认为顺时针来生成。arcTo(x1, y1, x2, y2, radius)根据给定的控制点和半径画一段圆弧再以直线连接两个控制点。quadraticCurveTo(cp1x, cp1y, x, y)绘制二次贝塞尔曲线cp1x,cp1y 为一个控制点x,y 为结束点。bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)绘制三次贝塞尔曲线cp1x,cp1y为控制点一cp2x,cp2y为控制点二x,y为结束点
画一个点
由于fill颜色必须是一个封闭的区域,所以用arc属性画一个小圆点
function draw() {var canvas document.getElementById(tutorial);if (canvas.getContext) {var ctx canvas.getContext(2d);ctx.fillStyle rgba(0, 0, 200, 0.5);ctx.beginPath();ctx.arc(75, 75, 10, 0, Math.PI * 2, true); // 绘制ctx.fill();}else {console.log(不支持canvas)}
}画一条线
画一条线,lineTo(x, y)绘制一条从当前位置到指定 x 以及 y 位置的直线。 function draw() {var canvas document.getElementById(tutorial);if (canvas.getContext) {var ctx canvas.getContext(2d);ctx.fillStyle rgba(0, 0, 200, 0.5);ctx.beginPath();ctx.lineTo(100, 120);ctx.lineTo(100, 25);ctx.stroke()}else {console.log(不支持canvas)}
}画一个三角形面
js画三个不重叠的点形成三角形
function draw() {var canvas document.getElementById(canvas);if (canvas.getContext) {var ctx canvas.getContext(2d);ctx.fillStyle rgba(0, 0, 200, 0.5);ctx.beginPath();ctx.moveTo(75, 50);ctx.lineTo(100, 75);ctx.lineTo(100, 25);ctx.fill();}
}效果如下
画一个笑脸
结合 路径和arc旋转画出一个笑脸 function draw() {var canvas document.getElementById(tutorial);if (canvas.getContext) {var ctx canvas.getContext(2d);ctx.fillStyle rgba(0, 0, 200, 0.5);ctx.beginPath();ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制ctx.moveTo(110, 75);ctx.arc(75, 75, 35, 0, Math.PI, false); // 口 (顺时针)ctx.moveTo(65, 65);ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼ctx.moveTo(95, 65);ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼ctx.stroke();}else {console.log(不支持canvas)}
}效果如下 用贝塞尔曲线画一个爱心
使用bezierCurveTo 三次贝塞尔曲线画桃心
function drawHeart() {var canvas document.getElementById(tutorial);if (canvas.getContext) {var ctx canvas.getContext(2d);ctx.fillStyle rgb(200,0,0);// 二次贝塞尔曲线ctx.beginPath();ctx.moveTo(75, 40);ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);ctx.fill();}else {console.log(不支持canvas)}
}
效果如下
⭐总结
使用Canvas需要在HTML文档中创建一个Canvas元素并设置其宽度和高度。例如
canvas idmyCanvas width500 height500/canvas然后在JavaScript代码中获取Canvas元素的引用并使用getContext方法获取绘图上下文对象。绘图上下文对象有许多用于绘制图形的方法。例如
var canvas document.getElementById(myCanvas);
var ctx canvas.getContext(2d);现在可以使用绘图上下文对象的方法来绘制图形。例如使用ctx.fillStyle设置填充颜色使用ctx.fillRect绘制一个矩形
ctx.fillStyle red;
ctx.fillRect(100, 100, 200, 200);还可以使用ctx.strokeStyle设置描边颜色使用ctx.strokeRect绘制一个带有描边的矩形
ctx.strokeStyle blue;
ctx.strokeRect(150, 150, 100, 100);此外还可以使用ctx.beginPath开始一个路径使用ctx.moveTo移动到一个新的点使用ctx.lineTo在当前点和指定点之间绘制一条直线。例如
ctx.beginPath();
ctx.moveTo(300, 300);
ctx.lineTo(400, 400);
ctx.lineTo(400, 300);
ctx.closePath();
ctx.stroke();这只是Canvas的一些基础用法Canvas还有许多其他功能和方法可以用于绘制更复杂的图形和动画。详细的文档可以在MDN上找到。
⭐结束
本文分享到这结束如有错误或者不足之处欢迎指出 点赞是我创作的动力 ⭐️ 收藏是我努力的方向 ✏️ 评论是我进步的财富 最后感谢你的阅读
