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>标签只是图形容器,必须使用脚本来绘 ...
随机推荐
- 负载均衡session会话保持方法
负载均衡时,为了保证同一用户session会被分配到同一台服务器上,可以使用以下方法:1.使用cookie将用户的session存入cookie里,当用户分配到不同的服务器时,先判断服务器是否存在该用 ...
- OpenGL学习进程（13）第十课：基本图形的底层实现及算法原理
本节介绍OpenGL中绘制直线.圆.椭圆,多边形的算法原理. (1)绘制任意方向(任意斜率)的直线: 1)中点画线法: 中点画线法的算法原理不做介绍,但这里用到最基本的画0<=k ...
- iOS中怎么存储照片到自定义相册
在市场上主流App中,大多数App都具有存储图片到自己App的相册中.苹果提供的方法只能存储图片到系统相册,下面讲一下怎么实现: 实现思路: 1.对系统相册进行操作的前提必须导入#import &l ...
- C#实现二维码功能，winform 以及 asp.net均可以用
二维码现在用途很多,怎么用C#编程生成呢? 准备 ThoughtWorks.QRCode.dll 需要 一个类 QRCode,这个类专门来生成二维码的 using System; using Syst ...
- VB.NET 创建文件以及文件的读写（创建随机数）
创建文件 Dim strFile As String = String.Format("C:\ErrorLog.txt", DateTime.Today.ToString(&quo ...
- OpenCASCADE Rational Bezier Curves
OpenCASCADE Rational Bezier Curves eryar@163.com Abstract. Although polynomials offer many advantage ...
- NodeJS POST Request Over JSON-RPC
1.npm install art-template2.npm install request3.在app.js中加入以下代码转html: var template = require('art-t ...
- Web APi之控制器创建过程及原理解析（八）
前言 中秋歇了歇,途中也时不时去看看有关创建控制器的原理以及解析,时间拖得比较长,实在是有点心有余而力不足,但又想着既然诺下了要写完原理一系列,还需有始有终.废话少说,直入主题. HttpContro ...
- Netty介绍
Netty是由JBOSS开发的高性能.异步事件驱动的NIO框架,它提供了对TCP.UDP和文件传输等协议的支持,作为一个异步NIO框架,Netty的所有IO操作都是异步非阻塞的,通过Future-Li ...
- DOM 节点的克隆与删除
无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情 ...