`
lib
  • 浏览: 137067 次
  • 性别: 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学习笔记.doc

    2. Canvas与2D上下文：大多数Canvas元素主要用于二维图形绘制。我们通过获取“2d”上下文来进行绘制，这个上下文支持各种绘图命令和属性，例如线宽(lineWidth)、填充色(fillStyle)、线性(lineTo)等。通过这些基础...

    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。...

    Canvas入门学习笔记

    Canvas入门学习主要通过对《老陈打码的全新Canvas全网最详细课程》的学习进行总结。 Canvas的基本概念包括HTML元素&lt;canvas&gt;，它是一个网页上的画布。必须设置id、width、height属性。例如，绘制一个矩形的代码如下...

    canvas学习笔记，包含练习，包括五子棋小游戏，动画效果，基础练习等,是跟着哔哩哔哩里面的教学视频做的，如果有用到私人资源，请

    在总结这些学习笔记的过程中，学习者不仅能够获得关于Canvas绘图技术的系统知识，还能够通过实践提高编程能力，特别是图形用户界面设计和动画制作方面的技能。这些知识和技能的掌握对于前端开发者来说是十分宝贵的，...

    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动态图形动画下载.rar

    通过分析这个文件，我们可以学习到如何使用Canvas API结合jQuery来创建动态图形，以及如何通过CSS来优化整体的网页呈现。 总之，这个压缩包提供的实例是一个综合运用HTML5 Canvas、jQuery和CSS特效的例子，对于想要...

    HTML5 Canvas不规则粒子动画.zip

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

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