H5与CS3权威上.5 绘制图形(1)
1.canvas元素基础知识
(1)在页面上放置canvas元素,相当于在页面上放置一块“画布”,可以用Javascript编写在其中进行绘画的脚本。
(2)在页面中放置canvas元素
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <script type="text/javascript" src="script.js" charset="gb2312"></script> </head> <body onload="draw('canvas');"> <h1>元素标签</h1> <canvas id="canvas" width="400" height="300"></canvas> </body> </html>
function draw(id){ var canvas=document.getElementById(id); if(canvas==null){ return false; } var context=canvas.getContext("2d"); context.fillStyle="#eeeeff"; //fillStyle:填充的样式,在该属性中填入填充的颜色。 context.fillRect(0,0,400,300); //fillRect方法,填充矩形。 context.fillStyle="red"; context.strokeStyle="bule"; //strokeStyle:图形边框的样式,边框的颜色。 context.lineWidth=1; //线宽。 context.fillRect(50,50,100,100); context.strokeRect(50,50,100,100); //strokeRect:绘制矩形边框。 context.clearRect(60,60,50,50); //clearRect:将指定的矩形区域中的图形擦除,变为透明。 }
如上程序,使用canvas和Javascript脚本绘制矩形,步骤如下:
(1)取得canvas元素,用document.getElementById等方法取得canvas对象。
(2)取得上下文(context)
进行图形绘制时,需要使用到图形上下文,图形上下文是一个封装了很多绘图功能的对象。需要使用canvas对象的getContext方法获取图形的上下文。在draw函数中,将参数设置为2d。
(3)填充和绘制边框。
(4)使用fillStyle和strokeStyle设定图形和边框的样式。
(5)使用fillRect和strokeRect方法绘制矩形和边框。
注:
context.fillRect(x,y,width,height)
context.strokeRect(x,y,width,height)
context.clearRect (x,y,width,height) 三个方法的参数是一样的,x是指矩形起点的横坐标,y是指矩形起点的纵坐标,坐标原点为canvas画布的最左上角,width是指矩形的长度,height是指矩形的高度——通过这4个参数,矩形的大小可以同时确定。
H5与CS3权威上.5 绘制图形(1)的更多相关文章
- H5与CS3权威下.18 and 19 选择器(1)
18章.CSS3概述 1.从前端技术的角度把互联网的发展分为三个阶段: (1)web1.0:HTML和CSS. (2)web2.0:Ajax,Javascript/DOM/异步数据请求. (3)web ...
- H5与CS3权威下.19 选择器(2)结构性伪类选择器
1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器 ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- html5 canvas 笔记一(基本用法与绘制图形)
<canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...
- WPF2D绘制图形方法
我们先看看效果如何: xaml文件: <Window x:Class="WPF2D绘制图形方法.MainWindow" xmlns="http://schemas. ...
- 11-UIKit(Storyboard、View的基本概念、绘制图形、UIBezierPath)
目录: 1. Storyboard 2. Views 3. View的基本概念介绍 4. 绘制图形 5. UIBezierPath 回到顶部 1. Storyboard 1.1 静态表视图 1)Sec ...
- HTML5—canvas绘制图形(1)
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...
- 【canvas学习笔记二】绘制图形
上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个 ...
- HTML5使用Canvas来绘制图形
一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘 ...
随机推荐
- meta标签中的http-equiv属性使用介绍(转载)
meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...
- javascript技术难点(三)之this、new、apply和call详解
4) this.new.call和apply的相关问题 讲解this指针的原理是个很复杂的问题,如果我们从javascript里this的实现机制来说明this,很多朋友可能会越来越糊涂,因此本 ...
- MySql事务概述
事务是访问并更新数据库中各种数据项的一个程序执行单元.在事务中的操作,要么都执行修改,要么都不执行,这就是事务的目的,也是事务模型区别于文件系统的重要特征之一. 严格上来说,事务必须同时满足4个特性, ...
- @font-face使用
转自http://www.tuicool.com/articles/QVf6nei 一.webfont与@font-face 什么是webfont web font,又称之为 在线字体 或者 网络字体 ...
- 前端学PHP之字符串函数
× 目录 [1]特点 [2]输出 [3]空格[4]大小写[5]HTML[6]格式化[7]比较 前面的话 字符串的处理和分析在任何编程语言中都是一个重要的基础,往往是简单而重要的.信息的分类.解析.存储 ...
- js self = this的解释
Demo 1: function Person(){ this.name = 'hjzgg'; this.age = 24; this.show = function(){ alert(name + ...
- eclipse导入web项目之后项目中出现小红叉解决办法
项目中有小红叉我遇到的最常见的情况: 1.项目代码本身有问题.(这个就不说了,解决错误就OK) 2.项目中的jar包丢失.(有时候eclipse打开时会出现jar包丢失的情况,关闭eclipse重新打 ...
- .NET平台开源项目速览(9)软件序列号生成组件SoftwareProtector介绍与使用
在文章:这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,给大家初步介绍了一下Software Protector序列号生成组件.今天就通过一篇简单的文章来预览一下其强大的功 ...
- 如何用Node编写命令行工具
0. 命令行工具 当全局安装模块之后,我们可以在控制台下执行指定的命令来运行操作,如果npm一样.我把这样的模块称之为命令行工具模块(如理解有偏颇,欢迎指正) 1.用Node编写命令行工具 在Node ...
- 【HTTP劫持和DNS劫持】实际JS对抗
1.对于DIV注入的,可以初始化时检查全部html代码. 检测是否被劫持比较简单,但对抗就略麻烦,这个在说完第2点之后再解释. 2.对于js注入,可以在window监听DOMNodeInserted事 ...