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>标签只是图形容器,必须使用脚本来绘 ...
随机推荐
- 【解决】Word 在试图打开文件时遇到错误 请尝试下列方法：* xxx * xxx * xxx
有好几种情况,我先说我的这个情况 1.word设置不当导致 看图: 然后就能打开了~ 2.word格式问题,比如原来是doc,被人手动改成docx~~~ 解决方法:改回来 3.word版本不兼容,比如 ...
- ClickOnce部署（1）：一些发布方式
ClickOnce是什么玩意儿,这个问题嘛,在21世纪的互联网严重发达的时代,估计也没有必要大费奏章去介绍了,弄不好的话,还有抄袭之嫌.因此,有关ClickOnce的介绍,各位朋友可以直接查找MSDN ...
- 运用webkit绘制渲染页面原理解决iscroll4闪动的问题
原:http://www.iunbug.com/archives/2012/09/19/411.html 已经有不少前端同行抱怨iScroll4的各种问题,我个人并不赞同将这些问题归咎于iScroll ...
- lua中的数据类型
lobject.h: lobject.h: 其中使用GCObject表示的数据类型是需要lua 的gc记录的. lstate.h: lobject.h:
- 掌握 cinder-scheduler 调度逻辑 - 每天5分钟玩转 OpenStack（48）
上一节我们详细讨论了 cinder-api 和 cinder-volume,今天讨论另一个重要的 Cinder 组件 cinder-scheduler. 创建 Volume 时,cinder-sche ...
- 高级javascript---原型和原型继承
高级javascript---原型和原型继承 在 JavaScript 中,prototype 是函数的一个属性,同时也是由构造函数创建的对象的一个属性. 函数的原型为对象. 它主要在函数用作构造函数 ...
- 微信公众平台开发（二）——access_token、日志
一.access_token 1)两种access_token,网页授权access_token和普通access_token 1.微信网页授权是通过OAuth2.0机制实现的,在用户授权给公众号后, ...
- 1Z0-053 争议题目解析481
1Z0-053 争议题目解析481 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 481.Which statement is true about a running sessi ...
- Spring配置c3p0数据源时出错报:java.lang.NoClassDefFoundError: com/mchange/v2/ser/Indirector
今天在使用Spring配置c3p0数据源时,使用的数据库是mysql,服务器是tomcat,运行时报了一个 java.lang.NoClassDefFoundError: com/mchange/v2 ...
- hibernate笔记--缓存机制之 二级缓存(sessionFactory)和查询缓存
二级缓存(sessionFactory): Hibernate的二级缓存由SessionFactory对象管理,是应用级别的缓存.它可以缓存整个应用的持久化对象,所以又称为“SessionFactor ...