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>
index.js内容：
(function(){ // 闭包，防止变量、方法重复
var canvasDom = document.getElementById("myCanvas");
var context = canvasDom.getContext("2d"); // 获取绘制功能的对象（context：上下文）
drawRectangle(10, 10, 300, 200, 10, ['red', 'blue']);
/**
* [drawRectangle 画一个空心的矩形]
* @param {[int]} x [起点x坐标]
* @param {[int]} y [起点y坐标]
* @param {[int]} width [宽度]
* @param {[int]} height [高度]
* @param {[int]} lineWidth [线宽]
* @param {[string]} color [边框颜色，如果是数组，则渐变]
* @param {[int]} direction [渐变方向：0-左右；1-上下；2-左上到右下；3-左下到右上]
* @return {[undefined]} [无]
*/
function drawRectangle(x, y, width, height, lineWidth, color, direction) {
context.beginPath(); // 开始路径，如果没有这个和结束路径包围，所有线条都是最后那根线条的样式了
context.strokeStyle = getFillColor(x, y, width, height, color, direction);
context.lineWidth = lineWidth;
context.strokeRect(x, y, width, height);
context.closePath(); // 结束路径，应与开始路径呼应(会不会导致内存泄露跟实现有关系)
context.stroke();
}
fillRectangle(10, 220, 300, 200, ['blue', 'green'], 3);
/**
* [fillRectangle 画一个实心的矩形]
* @param {[int]} x [起点x坐标]
* @param {[int]} y [起点y坐标]
* @param {[int]} width [宽度]
* @param {[int]} height [高度]
* @param {[string|array]} color [填充颜色，如果是数组，则渐变]
* @param {[int]} direction [渐变方向：0-左右；1-上下；2-左上到右下；3-左下到右上]
* @return {[undefined]} [无]
*/
function fillRectangle(x, y, width, height, color, direction) {
context.beginPath(); // 开始路径，如果没有这个和结束路径包围，所有线条都是最后那根线条的样式了
context.fillStyle = getFillColor(x, y, width, height, color, direction);
context.fillRect(x, y, width, height);
context.closePath(); // 结束路径，应与开始路径呼应(会不会导致内存泄露跟实现有关系)
context.stroke();
}
function getFillColor(x, y, width, height, color, direction) {
var fillColor = color;
if (typeof color == 'object') {
var x1 = x, y1 = 0;
var x2 = x+width, y2 = 0;
if (direction == 1) {
x1 = 0; y1 = y;
x2 = 0; y2 = y+height;
} else if (direction == 2) {
x1 = x; y1 = y;
x2 = x+width; y2 = y + height;
} else if (direction == 3) {
x1 = x; y1 = y+height;
x2 = x+width; y2 = y;
}
fillColor = context.createLinearGradient(x1, y1, x2, y2);
for (var i=0; i<color.length; i++) {
fillColor.addColorStop(i/color.length, color[i]);
}
}
return fillColor;
}
})();
相关推荐
它提供了JavaScript API，允许开发者直接在2D画布上绘制图形，包括但不限于矩形、圆形以及其他几何形状。QML（Qt Meta Language）是Qt框架的一部分，主要用于创建富交互式用户界面，而qt5是Qt框架的第五个主要版本，...
这些函数包括绘制线条、形状、图像以及应用渐变和阴影等。要创建印章，我们需要了解以下几个关键知识点： 1. **Canvas元素**：首先，在HTML文档中添加一个`<canvas>`元素，指定其id以便在JavaScript中引用。例如： ...
1. **Android Canvas**: Android的Canvas类是用于在Bitmap上绘制图形的基础，包括线条、矩形、圆形等。你需要理解Canvas的基本方法，如`drawRect()`，`drawCircle()`等，它们接受不同的参数来定义形状的位置和样式。...
Delphi 为窗体绘制渐变背景，这里使用了Delphi中的Canvas.Brush.Color来实现窗口... //每次画矩形的画刷颜色 Dct:=Rect(i,0,i 1,self.Height); //每次刷绘的矩形区域 Canvas.FillRect(Dct); //填充颜色 end;
总结来说，JavaScript的Canvas API允许开发者以编程方式在网页上绘制图形，包括使用渐变颜色填充的矩形。通过理解`createLinearGradient`、`addColorStop`和`fillRect`等方法，我们可以创建出各种视觉效果丰富的图形...
2. **Canvas API**：Canvas API提供了一系列的绘图方法，如`fillRect()`（填充矩形）、`beginPath()`（开始一个新的路径）、`stroke()`（描边路径）等，以及用于颜色和渐变的管理方法，例如`fillStyle`和`...
这是html5中canvas的一个综合的例子，同时还有canvas的鼠标单击事件的监听代码
CSS3允许开发者添加动态效果，如阴影、渐变、动画等，提升画板的视觉体验。Bootstrap则提供了响应式布局和预设的UI组件，使得画板在不同设备上都能保持良好的显示效果。 在实际应用中，这样的画板可以用于教学、...
Canvas支持设置填充色、描边色，还可以创建线性渐变和径向渐变，为图形添加丰富的视觉效果。例如，`createLinearGradient()`和`createRadialGradient()`函数可以帮助我们创建自定义的渐变。 在图形绘制部分，书会...
`canvas`是Web开发中的一个强大工具，它允许开发者动态绘制图形，包括动画效果，为网页添加丰富的视觉体验。 一、canvas基础 HTML5的`canvas`元素是一个矩形区域，可以用于在网页上绘制2D图形。通过JavaScript，...
"android canvas画人"这个主题，意味着我们将探讨如何利用Canvas在Android应用中绘制一个人物图像。下面将详细介绍Canvas的使用以及如何自定义绘制人物。 Canvas是Android的图形系统的一部分，允许开发者在内存中的...
更高级的功能包括渐变、阴影、图案、变换、混合模式等。例如，创建线性渐变： ```javascript var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); gradient.addColorStop(0, 'red'); gradient....
本文将详细讲解如何使用JS+Canvas来绘制矩形，并通过实例代码来展示具体的操作步骤。 首先，我们需要一个HTML文件，其中包含`<canvas>`元素。这个元素是画布，我们将在此基础上进行绘制。下面是一个简单的HTML结构...
这篇博客"HTML5 canvas画圆角框"主要探讨了如何使用canvas API来绘制具有圆角的矩形框。 在HTML5中，`<canvas>`元素是一个画布，通过JavaScript的`CanvasRenderingContext2D`对象，我们可以在这个画布上进行绘图...
这个“计算机软件-商业源码-实例二--渐变色和动画矩形效果.zip”文件提供了一个示例，展示了如何在程序中实现动态的渐变色和矩形动画效果。下面我们将详细探讨这些技术及其背后的原理。 首先，让我们来理解“渐变色...
2. **绘图API**：Canvas API提供了多种绘图方法，如`fillRect()`用于填充矩形，`strokeRect()`画出矩形边框，`beginPath()`和`endPath()`用于开始和结束路径，`moveTo()`和`lineTo()`绘制线条，`arc()`绘制圆弧，`...
3. **像素操作**：Canvas提供`getImageData()`方法可以获取图像数据，返回一个`ImageData`对象，包含每个像素的颜色信息。`putImageData()`则可以将修改后的`ImageData`放回Canvas。在像素大战中，可能通过这种方式...
这个API包括了各种绘制路径、矩形、圆形、文本、图像的方法，以及颜色、渐变和阴影的控制等。在星空屏保动画中，可能用到的API有`fillStyle`来设置星星的颜色，`arc`来绘制圆点代表星星，`beginPath`和`closePath`...