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>标签只是图形容器,必须使用脚本来绘 ...
随机推荐
- Nginx服务器之基础学习
一.Nginx介绍 nginx:Nginx是一种软件服务器(轻量级),故它最主要的功能就是可以与服务器硬件结合,我们的应用程序可以放在nginx服务器上进行发布,已达到让网民浏览的效果.除此自外,Ng ...
- java中集合类中Collection接口中的Set接口的常用方法熟悉
1:Set集合由Set接口和Set接口的实现类组成,Set接口继承了Collection接口,因为包含Collection接口的所有方法. 2:由于Set接口中不允许存在重复值,因此可以使用Set集合 ...
- SQL Server 更改跟踪（Chang Tracking）监控表数据
一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 主要区别与对比(Compare) 实现监控表数据步骤(Process) 参考文献(Refere ...
- 解密jQuery事件核心 - 自定义设计（三）
接上文http://www.cnblogs.com/aaronjs/p/3447483.html 本文重点:自定义事件 “通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率 ...
- XSD文件生成C#VO实体类
最近公司要做一个项目,需要和现有的其他项目对接,由于不知道他们的数据库,只有XSD文件.所以,我们在修改相应的程序时,就需要根据他们提供的XSD文件,来写我们的VO实体类,由于我写过根据Oracle数 ...
- ASP.NET MVC5 网站开发实践(二) Member区域 - 全部文章列表
显示文章列表分两块,管理员可以显示全部文章列表,一般用户只显示自己的文章列表.文章列表的显示采用easyui-datagrid.后台需要与之对应的action返回json类型数据 目录 ASP.N ...
- Web APi之认证（Authentication）及授权（Authorization）【一】（十二）
前言 无论是ASP.NET MVC还是Web API框架,在从请求到响应这一过程中对于请求信息的认证以及认证成功过后对于访问页面的授权是极其重要的,用两节来重点来讲述这二者,这一节首先讲述一下关于这二 ...
- 用队列模拟jquery的动画算法
Aaron最近疯狂的爱上了算法研究,估计又要死伤不少脑细胞了,我喜欢捡现成的,可以省些力气.发现他写的一段源码,运行一下,还蛮好玩的,于是拿来分析一下,一来吸收下里边的营养,二来加深一下源码学习的功力 ...
- 1Z0-053 争议题目解析134
1Z0-053 争议题目解析134 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 134.You are managing an Oracle Database 11g datab ...
- 微信小程序小技巧系列《一》幻灯片，tab导航切换
作者:gou-tian 来自:github 幻灯片 使用微信小程序原生组件swiper实现. <swiper indicator-dots="{{indicatorDots}}&quo ...