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>标签只是图形容器,必须使用脚本来绘 ...
随机推荐
- CSS之flex布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 获取URL最后一个 ‘/’ 之后的字符
在开发项目的过程中,经常遇到需要解析论坛,博客等的URL的问题,比如:'abc/def/jkl' 或 'abc/def/jkl/',获取最后一个‘/’之后的所有字符‘jkl’,由于特殊字符'/'的个数 ...
- WPF DatePicker只显示年和月 修改：可以只显示年
最近的项目,查询时只需要年和月,不需要日,因此需要对原有的DatePicker进行修改,查询了网上的内容,最终从一篇帖子里看到了添加附加属性的方法,地址是http://stackoverflow.co ...
- Atom支持Markdown和Latex
本篇博客主要用于记录Atom编辑器同时支持markdown和latex: 1.安装 安装方法1: (Windows系统)File->Settings->Install中搜索markdown ...
- bootstrap中的Grid system详解
啦啦啦,都十月中旬啦,好快啊,这个月的多一半都过去了,然而我才写第三篇随笔,小颖得加油啦~~~ 下面来看下小颖给大家分享的内容 1. .col-md-*和.col-xs-* <!doctyp ...
- 【原创】开源Math.NET基础数学类库使用(03)C#解析Matlab的mat格式
本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...
- JavaScript中的日期处理注意事项
在业务逻辑比较多的系统里面,一般都会涉及到日期的处理.包括选择起始日期和结束日期,结束日期要大于起始日期,日期的显示和输入等. 输入这一块基本都是使用jQuery datetimepicker,后来系 ...
- java 中多线程之间的通讯之生产者和消费者 （多个线程之间的通讯）
在真实开发 中关于多线程的通讯的问题用到下边的例子是比较多的 不同的地方时if 和while 的区别 如果只是两个线程之间的通讯,使用if是没有问题的. 但是在多个线程之间就会有问题 /* * 这个例 ...
- OO中，先有对象还是先有类？
就是问,在面向对象思想里,先有对象还是先有类,乍一看和先有鸡蛋还是先有鸡是一类问题,其实不然!这个问题,在lz考研复试的时候被面试官问过,一模一样,如今又在一个笔试题里看到了类似的题目,眨一下,有人会 ...
- CLR中的程序集加载
CLR中的程序集加载 本次来讨论一下基于.net平台的CLR中的程序集加载的机制: [注:由于.net已经开源,可利用vs2015查看c#源码的具体实现] 在运行时,JIT编译器利用程序集的TypeR ...