文档章节

HTML5中canvas知识点详解1-用HTML5绘制一个简单的矩形

梦前端
 梦前端
发布于 2016/05/16 14:34
字数 344
阅读 14
收藏 0

一.canvas元素的基本介绍

getContext : 获取图形的上下文

fillStyle : 填充样式

fillRect : 填充方块图形

strokeStyle : 线条样式

strokeRect : 线条方块图形

lineWidth : 线宽

二.canvas使用的步骤

1.获取canvas元素对象

2.获取图形上下文(也就是创造一个画布的环境)

3.进行具体的绘画操作,后面我们会学习各种绘画的操作。

三.绘制一个矩形,体验canvas的用法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>绘制一个矩形</title>
<script>
window.onload = function(){
	//获得canvas元素
	var oC = document.getElementById('can');
	//取得上下文
	var oCt = oC.getContext('2d');
	//设置绘图样式
	oCt.fillStyle = '#EEEEFF';
	//绘制填充图形
	oCt.fillRect(0,0,500,500);
	//设置绘图样式
	oCt.fillStyle = 'red';
	oCt.strokeStyle = 'blue';
	//设置线宽
	oCt.lineWidth = 2;
	//绘制图形
	oCt.fillRect(50,50,100,100);
	oCt.strokeRect(50,50,100,100);
	
};
</script>
</head>

<body>
<h1>canvas元素的基础知识</h1>
<canvas id='can' width="500px" height="500px">
<span>该浏览器不支持canvas标签元素</span>
</canvas>
</body>
</html>

 

© 著作权归作者所有

梦前端
粉丝 0
博文 14
码字总数 7624
作品 0
马鞍山
程序员
私信 提问
Web 开发中的矢量绘图处理和应用

矢量绘图一直是 Web 开发中一直比较薄弱的环节。本文首先针对不同浏览器详细阐述不同的矢量绘图解决方案,其中包括 HTML5 Canvas、SVG 以及 VML 等技术;之后针对每种不同的技术介绍其实现和...

IBMdW
2011/09/03
2.1K
0
Web开发中的矢量绘图(vml,svg)处理和应用

前言 1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展,HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 ...

kevin_pang
2014/02/25
483
0
HTML5 从基础学习之二 --Canvas Geolocation Cache

HTML5 的canvas元素使用JavaScript在网页上绘制图像 其拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。 1、Canvas元素的创建(规定元素的id,宽度和高度) <canvas id="myCanvas" ...

Drealin
2012/09/07
1K
0
HTML5 中 40 个最重要的技术点

介绍 我是一个ASP.NET MVC的开发者,最近在我找工作的时候被问到很多与HTML5相关的问题和新特性。所以以下40个重要的问题将帮助你复习HTML5相关的知识。 这些问题不是你得到工作的高效解决方...

oschina
2014/10/18
14.5K
18
使用 HTML5 canvas 绘制精美的图形

本文主要介绍使用一个简单的 HTML 元素 Canvas 来增强您的 web 页面。通过利用其灵活性和多样性吸引访客反复访问您的站点。 HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HT...

IBMdW
2012/02/21
3.1K
4

没有更多内容

加载失败,请刷新页面

加载更多

为构建社交关系链手淘都做了啥?

作者|王卫(泓冰) 出品|阿里巴巴新零售淘系技术部 01、淘宝社交关系推荐的背景 1、互联网下半场到来:互联网的下半场,人口红利消失,各大平台需要对用户做精细化运营,用户的增长和留存是每一...

阿里云官方博客
6分钟前
3
0
Iaas/Paas/Saas有何区别,一个故事告诉你

云计算有三种服务模式,IaaS,PaaS和SaaS。单从英文全称去理解,他们分别是“基础设施即服务”“平台即服务”和“软件即服务”。 这样翻译过来可不好理解,但是我们可以举个例子。现在我们就以...

JEPaaS云平台
14分钟前
3
0
温度传感器怎么测好坏

  温度传感器也就是负温度系数热敏电阻,温度越高,电阻越小,测量时先看其阻值能不能根据温度的变化而变,再看其变化的阻值是不是在标定的范围之内。   有以下四种方法;   1、若是有...

仙溪
14分钟前
3
0
zk中ZooKeeperServer解析

内部类 ChangeRecord 处理PrepRP和FinalRP之间的信息 static class ChangeRecord { ChangeRecord(long zxid, String path, StatPersisted stat, int childCount, List<ACL> acl) {......

writeademo
24分钟前
3
0
LNMP---安装worrdpress、discuz,域名重定向,用户认证,nginx访问日志

4.34 安装wordpress 4.35 安装discuz 4.36 域名重定向 4.37 用户认证 4.38 nginx访问日志 一、安装wordpress 创建博客: 添加一个博客的虚拟主机 blog.tobe.com.conf 做如下更改 安装博客wor...

tobej
26分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部