index.html
<!DOCTYPE HTML>
<html>
<style type="text/css">
#myCanvas {border: 1px solid #BEBEBE;}
</style>
<body>
<canvas id="myCanvas" width="800" height="600">你的浏览器不支持 HTML5</canvas>
<script src="index.js"></script>
</body>
</html>
Javascript:
(function(){ // 闭包，防止变量、方法重复
var canvasDom = document.getElementById("myCanvas");
var context = canvasDom.getContext("2d"); // 获取绘制功能的对象（context：上下文）
drawLineRect(10, 10, 300, 200, 10, 'rgba(0, 0, 0, 0.5)');
drawLineRect(25, 25, 270, 170, 10, 'blue');
drawLineRect(40, 40, 240, 140, 10, '#00DB00');
/**
* [drawLineRect 画矩形]
* @param {[type]} x [起点位置x坐标]
* @param {[type]} y [起点位置y坐标]
* @param {[type]} width [矩形宽度]
* @param {[type]} height [矩形高度]
* @param {[type]} lineWidth [线条宽度]
* @param {[type]} color [线条颜色]
* @return {[type]} [无]
*/
function drawLineRect(x, y, width, height, lineWidth, color) {
context.beginPath(); // 开始路径，如果没有这个和结束路径包围，所有线条都是最后那根线条的样式了
context.moveTo(x, y); // 开始位置
context.lineTo(x+width, y); // 画到此处
context.lineTo(x+width, y+height); // 画到此处
context.lineTo(x, y+height); // 画到此处
context.lineTo(x, y); // 画到此处
context.lineTo(x+width, y); // 画到此处--这句很重要，设置宽度为10，没有这句，起点有缺口
context.lineWidth = lineWidth;
context.strokeStyle = color;
context.closePath(); // 结束路径，应与开始路径呼应(会不会导致内存泄露跟实现有关系)
context.stroke();
}
})();
相关推荐
Html5 Canvas画线有毛边是一个在Web前端开发中常见的问题，特别是在使用Canvas 2D渲染图形时。这个问题主要是由于Canvas中坐标点与像素点之间的对齐问题造成的。下面我们将详细探讨这个问题及解决方案。 **Canvas...
例如，可以在画线前调用Canvas.SetPixelFormat函数，选择支持抗锯齿的像素格式。然后，使用Canvas的LineTo等方法进行画线。这种方法可能需要对Windows API有较深入的理解，实现起来相对复杂。 在提供的文件列表中，...
在这个“Canvas画布线条组合动画特效.zip”文件中，很可能包含了一个使用Canvas API创建的线条组合动画示例。这种特效通常用于提升网页的视觉吸引力，尤其在网站头部、背景或交互元素中常见。 首先，让我们深入了解...
网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。（抖音资料）网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。（抖音资料）网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画...
在WPF中实现鼠标在Canvas上画线的功能，可以通过监听鼠标的事件并结合图形绘制API来完成。以下是实现这一功能的关键知识点和步骤： ### 1. 基本概念 - **WPF**：Windows Presentation Foundation是.NET Framework的...
HTML5 Canvas画线段例子，Canvas也是HTML5的优势之一，很多在普通HTML中不能实现的东西，似乎在HTML5中使用Canvas可轻松解决，画线画图功能都超强大，本实例可作为你学习HTML5 Canvas的一个得力参考。
这个教程将带你了解如何利用Canvas进行基本的绘图操作，包括画线、位移和旋转，以及如何巧妙地绘制出五角星图案。无需复杂的数学计算，只需理解Canvas的基本变换原理，你就可以轻松实现这一目标。 首先，Canvas提供...
在Android开发中，Canvas是用于在屏幕上绘制2D图形的核心组件。`Canvas`类提供了丰富的绘图方法，让我们能够在Bitmap或者Surface上绘制线条、形状、文本等元素。在这个"Android画布Canvas之连线动画Demo"中，我们将...
在canvas画线条这篇文章中，我讲了画直线的方法，按理这篇画曲线的文章早该发了，但由于canvas画曲线比较特殊，我还没摸透，所以要一步步尝试。 canvas里画曲线的难点之一，就在于他连曲线的函数就有4个！分别是arc,...
在JavaScript中，我们可以利用Canvas API来实现各种复杂的图形操作，包括鼠标画图和线程画线。本教程将深入探讨如何使用Canvas进行这些功能。 首先，创建一个Canvas元素非常简单，只需在HTML中添加一个`<canvas>`...
在压缩包文件"lesson2"中，可能包含了进一步的学习材料，如更详细的代码示例、练习或者教学资源，帮助读者深入理解和实践Canvas画渐变线条的技术。 总的来说，学习并掌握Canvas的渐变线条绘制，不仅可以提升网页的...
本教程将深入探讨如何利用Canvas API实现鼠标拖动绘制任意矩形和多边形的功能。 首先，我们需要在HTML文件中创建一个`<canvas>`元素，并设置其id以便于在JavaScript中引用。例如： ```html <!DOCTYPE html> ...
canvas 实现点击画线/打点画闭合多边形，靠近元素高亮
首先，我们要了解Canvas的基本用法。Canvas是一个基于矢量图形的元素，通过JavaScript API来操作。在HTML中，我们可以通过`<canvas>`标签创建一个画布，然后通过JavaScript的`document.getElementById('canvas')`...
在这个“HTML5 Canvas画印章”的主题中，我们将深入探讨如何利用Canvas API来创建一个逼真的电子印章。 Canvas API是HTML5的一个核心特性，它通过JavaScript提供了一组用于在网页上绘制2D图形的函数。这些函数包括...
`beginPath()`开始一个新的路径，`moveTo(x, y)`移动到指定坐标，`lineTo(x, y)`画出从当前点到指定点的线，最后`stroke()`描边完成线条绘制。为了实现波动效果，可以定时改变线条的位置或宽度，或者改变线条的颜色...
在微信小程序中，canvas画布是一个非常重要的组件，它允许开发者进行丰富的图形操作，包括自由绘制功能。这个功能常用于创建涂鸦应用、手写笔记、图像编辑等场景。本篇将详细介绍如何利用微信小程序的canvas API来...
本篇文章将详细讲解如何利用Canvas在Android中画曲线图和三角形（多边形），并结合示例代码帮助理解。 首先，我们要明白Canvas的基本用法。Canvas是Android中的一个类，它提供了在Bitmap上绘制图形的方法。通常，...