`
lib
  • 浏览: 135642 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Canvas学习笔记(二)--绘图（矩形）

web前端html5canvas 
阅读更多

1、canvas网格坐标



 左上角为坐标原点(0,0)，横轴X向右坐标值增大，纵轴Y向下坐标值增大。坐标系中所有物体的位置都相对于这个原点。如图所示，蓝色方块的位置距左边x像素，距上面y像素，坐标为(x,y)。

 

2、绘制矩形

 

fillRect(x,y,width,height)：绘制填充颜色的矩形；

 

strokeRect(x,y,width,height)：绘制带有边框的矩形；

 

clearRect(x,y,width,height)：清空绘制的矩形区域，并使之透明；

 

参数的含义：

 

X：横坐标的位置；

y：纵坐标的位置；

width：矩形的宽度；

height：矩形的高度；

 

X,Y表示矩形左上角相对于原点(0,0)的位置。

 

矩形演示代码如下：

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  	<style type="text/css">
		.wraper {
			position: relative;
			border: 1px solid orange;
		}
  	</style>
	<script type="text/javascript">
		function draw(){
			var canvas = document.getElementById('test');
			
                         if(canvas.getContext){
				var cxt = canvas.getContext('2d');

				cxt.fillRect(5,5,100,100);
				cxt.clearRect(20,20,50,50);
				cxt.strokeRect(120,120,70,70);
			}

		}
	</script>
  </head>	
  
  <body onload="draw();">
	
	<canvas id="test" width="200px" height="200px" class="wraper"></canvas>

  </body>
</html>
 

 

看看3个方法不同的效果：


 

 

 

  • 大小: 1.2 KB
  • 大小: 894 Bytes
分享到：
| Canvas学习笔记(一)--基础知识
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    html5中canvas学习笔记1-画板的尺寸与实际显示尺寸

    本文的学习笔记重点讲述了`canvas`元素的画板尺寸与实际显示尺寸之间的关系。 首先，我们要了解`canvas`元素的尺寸是由其`width`和`height`属性直接指定的。这些属性定义了画布的像素尺寸，也就是画布的内部分辨率...

    HTML5 Canvas学习笔记(5)游戏得分动画

    这篇“HTML5 Canvas学习笔记(5)游戏得分动画”着重讲解了如何利用Canvas技术来实现游戏中的得分动画效果。通过学习这篇笔记，我们可以深入了解Canvas的基本用法以及如何将它应用于游戏开发。 首先，Canvas是HTML5的...

    HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）

    这篇“HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）”着重介绍了如何利用Canvas构建经典游戏——俄罗斯方块的基础部分，即色块的绘制与移动。 首先，我们要理解HTML5 Canvas的基本结构。它是一个二维绘图...

    HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）

    这篇“HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）”深入探讨了如何利用Canvas技术构建一个经典的游戏——俄罗斯方块。 在HTML5 Canvas上构建俄罗斯方块游戏，首先需要理解Canvas的基本结构和绘图API。...

    dom -canvas笔记

    ### DOM Canvas 绘图知识点详解 #### 一、Canvas 基础介绍 **Canvas** 是 HTML5 ...以上是关于 DOM Canvas 绘图的基础知识点，涵盖了从获取 Canvas 元素到具体绘图命令的详细解释，希望对学习 Canvas 绘图有所帮助。

    canvas学习

    在这个“canvas学习”的压缩包中，你将找到关于canvas的基本语法和学习笔记，这对于想要掌握这个技术的前端开发者来说是非常宝贵的资源。 1. **Canvas元素** - `canvas`标签是HTML5中的一个新元素，用于在网页上...

    canvas的clipRect理解

    在`android学习笔记--clip.docx`文档中，可能详细阐述了`clipRect`的使用实例、与其他方法的结合使用、注意事项等内容。通过阅读这份文档，开发者可以更深入地理解`clipRect`的原理和应用场景，从而在Android开发中...

    canvas学习笔记之绘制简单路径

    本篇文章将深入探讨Canvas的绘制简单路径，包括线段、矩形和圆弧路径的创建方法。 首先，我们来看线段（直线路径）的绘制。线段是Canvas最基本的元素之一，可以通过以下三个步骤完成： 1. `moveTo(x, y)`：这个...

    canvas-note:《Canvas开发笔记》(不定时更新)

    《Canvas开发笔记》是一部关于HTML5 Canvas的详细学习资料，主要涵盖了从基本的二维场景绘制到复杂的图像处理和动画制作等内容。以下是对这些知识点的详细解释： 1. **Canvas基本概念**：HTML5 Canvas是一个基于...

    HTML5高级程序设计学习笔记

    ### HTML5高级程序设计学习笔记 #### 一、HTML5新增结构标签 在HTML5中，为了更好地组织页面内容并增强语义性，引入了一系列新的结构标签，这些标签不仅能够帮助开发者更清晰地定义页面的不同部分，同时也为搜索...

    H5 Canvas随机生成花纹图案.zip

    Canvas是HTML5的一个重要特性，它提供了一个二维绘图环境，允许开发者直接在浏览器上进行图形绘制，为网页添加丰富的视觉效果。这个"**H5 Canvas随机生成花纹图案.zip**"可能包含一个或多个示例，用于演示如何利用...

    Raphael学习笔记

    根据提供的文件信息，可以看出这是一份关于Raphael JavaScript库的学习笔记。Raphael 是一个非常强大的JavaScript库，用于在Web浏览器中绘制矢量图形。它基于SVG（可缩放矢量图形）标准，并提供了丰富的API来简化...

    HTML5 canvas鼠标点击的粒子云特效

    `jb51.net.txt`、`去脚本之家看看.url`等可能是资源链接或笔记，对理解粒子云特效的实现帮助较小，但可能提供了学习资源。 总的来说，通过HTML5 canvas和JavaScript，我们可以创造出各种各样的视觉效果，包括鼠标...

    canvas学习之API整理笔记（一）

    在本篇“canvas学习之API整理笔记（一）”中，我们主要关注的是Canvas的基本API，包括如何获取Canvas元素、创建画布以及如何在Canvas上绘制基本图形。 首先，要在HTML中使用Canvas，需要在页面中添加一个`&lt;canvas&gt;`...

    HTML5 Canvas虚幻扭曲背景特效.zip

    HTML5 Canvas是一个二维绘图API，通过JavaScript进行操作。它提供了丰富的绘图方法，如`fillRect()`（填充矩形）、`beginPath()`（开始路径）、`moveTo()`（移动到指定点）、`lineTo()`（画线到指定点）等，使得在...

    HTML5 Canvas不规则粒子动画.zip

    例如，可以使用Canvas的`arc`方法绘制圆形粒子，或使用`rect`绘制矩形，甚至可以自定义路径。 6. **交互性**：如果需要，可以添加鼠标或触摸事件监听，让粒子响应用户的交互，如跟随鼠标移动、点击生成新粒子等。 ...

    html5 canvas全屏科幻粒子闪烁背景动画特效.zip

    2. 使用JavaScript获取Canvas的2D渲染上下文，这是进行绘图的基础。 3. 创建粒子对象，存储粒子的位置、速度、颜色等属性。 4. 编写函数来生成新的粒子，设置其初始状态。 5. 实现动画循环，更新每个粒子的位置和...

    HTML5 Canvas蒲公英特效.zip

    2. **绘图API**：Canvas提供了一套丰富的绘图API，包括`fillRect()`、`strokeRect()`、`beginPath()`、`moveTo()`、`lineTo()`、`arc()`等方法，用于绘制矩形、线条、曲线等形状。 3. **路径（Paths）**：`...

    HTML5 Canvas扑克牌花式发牌动画特效.zip

    而`js`文件夹可能包含了所有相关的JavaScript代码，包括jQuery库、Canvas绘图逻辑和可能的jQuery插件。 总的来说，这个压缩包提供了一个实际的HTML5 Canvas与jQuery结合的实例，帮助开发者学习如何在网页上实现复杂...

    HTML5 Canvas樱花树木特效.zip

    1. **绘图基本操作**：包括`fillRect()`、`strokeRect()`、`beginPath()`、`moveTo()`、`lineTo()`等方法，用于绘制矩形、线条、路径等基本图形。 2. **颜色与渐变**：利用`fillStyle`和`strokeStyle`属性设置填充...

Magicbox
Global site tag (gtag.js) - Google Analytics