html5 canvas（基本矩形）
先从简单的开始
fillRect(x,y,width,height)
在坐标x,y的位置加上一个宽，高 如：
fillRect(0,0,500,500)//在坐标0，0处加上一个宽高500的填充矩形
strokeRect(x,y,width,height)
在坐标x,y的位置加上一个宽，高边框矩形
但是需要使用lineWidth,lineJoin,strokeStyle,miterLimit设置下面会给出矩形函数
clearRect(x,y,width,height)
清除坐标x,y的位置宽，高的一块区域是起完全透明
感觉有点像用ps时候一个黑色的图层，拉一个矩形选框，然后按个delect的感觉一块透明
然后设置一下填充样式
context.fillStyle='#000000' //填充颜色
context.strokeStyle='#ff00ff' //边框颜色
完整代码
<!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=utf-8" />
<title>矩形</title>
<script src="js/modernizr.js"></script>
</head> <body>
<script type="text/javascript">
window.addEventListener('load',eventWindowLoaded,false);
function eventWindowLoaded(){
canvasApp();
}
function canvasSupport(){
return Modernizr.canvas;
}
function canvasApp(){
if(!canvasSupport()){
return;
}else{
var theCanvas = document.getElementById('canvas')
var context = theCanvas.getContext("2d") }
drawScreen();
function drawScreen(){
context.fillStyle="#000000"; //填充黑色
context.strokeStyle='#ff00ff' //边框为粉色
context.lineWidth=2; //边框宽度
context.fillRect(10,10,40,40) //矩形
context.strokeRect(0,0,60,60) //边框出现的位置
context.clearRect(20,20,20,20) //清除区域的位置
} } </script>
<canvas id="canvas" width="500" height="500">
你的浏览器无法使用canvas
如有疑问加QQ：1035417613;小白童鞋；你的支持是我最大的快乐！！
</canvas>
</body>
</html>
结果就是这样一个
如果对前面的结构不了解的话可以看我的上一篇http://www.cnblogs.com/LoveOrHate/p/4388321.html
html5 canvas（基本矩形）的更多相关文章
- html5 canvas绘制矩形和圆形
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...
- HTML5 Canvas ( 矩形的绘制 ) rect, strokeRect, fillRect
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- 赠书：HTML5 Canvas 2d 编程必读的两本经典
赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...
- 简介 jCanvas：当 jQuery遇上HTML5 Canvas
https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在 ...
- HTML5 CANVAS 实现图片压缩和裁切
原文地址:http://leonshi.com/2015/10/31/html5-canvas-image-compress-crop/?utm_source=tuicool&utm_medi ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- 使用 HTML5 canvas 绘制精美的图形
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4.HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HT ...
- html5 Canvas API
详细内容请点击 1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现C ...
随机推荐
- Flume的简单理解
由于没具体研究过画图,以前在公司每天都用Excel,所以很多图画都是画在了Excel上再剪切的,看着可能不太舒服. 先来看一下数据走向: 这样我们就大致了解了flume是干嘛的,在什么位置了. Flu ...
- unity2D背景移动补偿从而获得3d错觉效果
2d平台跳跃游戏当相机移动的时候背景跟随进行微调移动,从而使得玩家获得3d的错觉 using System.Collections;using System.Collections.Generic;u ...
- leetcode之有序数组的平方
题目描述: 给定一个按非递减顺序排序的整数数组 A,返回每个数字的平方组成的新数组,要求也按非递减顺序排序. 示例 1: 输入:[-4,-1,0,3,10] 输出:[0,1,9,16,100] 示例 ...
- Alpha Version Release Of Teamwork: Appendix 1 BUG BASH
在为期一周的发布周中,我们将app本身最后的细节完善,功能代码到位,UI不断改进和优化,团队在开始准备发布之前,对整个APP进行了一次BUG检查,每个人都部署了app在自己的android设备上进行测 ...
- final 140字评论I
1.约跑app:优化了最终界面,设备原因画质不是很清晰,如果能加以改进,能有较多的客户群,适合人群不限于青少年和成年人. 2.礼物挑选:虽然界面不是很清晰,但是整体设计看起来还算舒服,最后阶段又新增了 ...
- centos 7 安装截图软件shutter
1.解决 epel-release依赖问题 ,执行命令: yum insatll epel-release 2.然后下载nux-dextop-release-0-5.el7.nux.noarch.rp ...
- 深入理解学习Git工作流（git-workflow-tutorial）
转载:https://segmentfault.com/a/1190000002918123#articleHeader11 人在学习git工作流的过程中,从原有的 SVN 模式很难完全理解git的协 ...
- Java之递归遍历目录，修改指定文件的指定内容
EditProperties.java package PropertiesOperation.Edit; import java.io.File; /** * 替换指定Porpoerties文件中的 ...
- JS频率控制函数
/** * 频率控制 返回函数连续调用时,fn 执行频率限定为每多少时间执行一次 * @param {Function} fn 需要调用的函数 * @param {Number} delay 延迟时间 ...
- ELK环境配置
一.安装java环境 1.下载jre并安装,安装过程中没有什么特殊的,一直默认下一步即可. 2.配置环境变量 其中变量值为我们安装的jre的路径 二.安装elasticsearch 1.下载es安装包 ...