ctx.stroke()
时间: 2024-06-10 11:04:31 浏览: 12
ctx.stroke()是HTML5 Canvas中的一个方法,用于绘制Canvas元素中的路径。它实际上通过将路径边框渲染到屏幕上来完成绘图。当执行ctx.stroke()时,Canvas上下文就会按照先前定义的路径进行绘制,路径通常是通过下列方法之一来定义的:moveTo()、lineTo()、quadraticCurveTo()、bezierCurveTo()或arcTo()。
相关问题
const ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(50, 0); ctx.strokeStyle = '#ff0000'; ctx.lineWidth = 100; const ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(50, 0); ctx.strokeStyle = '#ff0000'; ctx.lineWidth = 100; ctx.stroke();
这段代码使用Canvas API绘制了一条直线。首先,通过`canvas.getContext('2d')`方法获取了一个2D绘图上下文对象,将其赋值给`ctx`变量。
接下来,通过调用`ctx.beginPath()`方法开始一个新的路径。然后,使用`ctx.moveTo(0, 0)`将绘图起点移动到坐标(0, 0)。再使用`ctx.lineTo(50, 0)`从起点绘制一条直线到坐标(50, 0)。
接着,通过设置`ctx.strokeStyle`属性为`'#ff0000'`来指定线条的颜色为红色。使用`ctx.lineWidth`属性设置线条的宽度为100个单位。
最后,通过调用`ctx.stroke()`方法绘制出设置好的直线。
注意:代码中的第一行`const ctx = canvas.getContext('2d');`只需要出现一次即可,不需要重复出现。
import QtQuick 2.4 import QtQuick.Controls 2.5 import QtQuick.Window 2.3 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") Canvas { id: canvas width: parent.width height: parent.height // 绘制网格 onPaint: { var ctx = getContext("2d"); ctx.lineWidth = 1; ctx.strokeStyle = "lightgray"; for (var x = 10; x < canvas.width; x += 10) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, canvas.height); ctx.stroke(); } for (var y = 10; y < canvas.height; y += 10) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(canvas.width, y); ctx.stroke(); } } function drawRectangle() { var ctx = canvas.getContext("2d"); // 修正获取上下文对象的代码 var startX, startY; canvas.onMousePress = function(event) 这里的canvas.onMousePress出现了错误,报错信息为Error: Cannot assign to non-existent property "onMousePress",应该怎么修改
Canvas并没有onMousePress属性,所以你需要使用Canvas的mouse事件来实现鼠标事件的处理。你可以使用Canvas的onMouseXxx事件(如onMousePressed、onMouseMoved、onMouseReleased)来处理鼠标事件。你可以按照以下步骤修改代码:
1. 删除canvas.onMousePress = function(event)这一行代码。
2. 在Canvas中添加onMousePressed事件处理函数:
onMousePressed: {
var ctx = canvas.getContext("2d");
startX = mouse.x;
startY = mouse.y;
}
3. 在Canvas中添加onMouseMoved事件处理函数:
onMouseMoved: {
if (mouse.buttonDown) {
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 重绘网格
for (var x = 10; x < canvas.width; x += 10) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
}
for (var y = 10; y < canvas.height; y += 10) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
ctx.stroke();
}
// 绘制矩形
var endX = mouse.x;
var endY = mouse.y;
var width = endX - startX;
var height = endY - startY;
ctx.fillStyle = "lightblue";
ctx.fillRect(startX, startY, width, height);
}
}
4. 在Canvas中添加onMouseReleased事件处理函数:
onMouseReleased: {
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 重绘网格
for (var x = 10; x < canvas.width; x += 10) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
}
for (var y = 10; y < canvas.height; y += 10) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
ctx.stroke();
}
// 绘制矩形
var endX = mouse.x;
var endY = mouse.y;
var width = endX - startX;
var height = endY - startY;
ctx.fillStyle = "lightblue";
ctx.fillRect(startX, startY, width, height);
}
这样就可以通过鼠标绘制矩形了。