HTML5之Canvas画正方形

1、设计源码

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>HTML5之Canvas画正方形</title>
<script type="text/javascript">
    function drawFour(id)
	{
		//获取canvas元素
		var canvas = document.getElementById("canvas");
		if(canvas == null)
		   return false;
		//获取上下文
		var context = canvas.getContext('2d');
		//设定填充图形的样式
		context.fillStyle = "#EEEEFF";
		//绘制图形
		context.fillRect(0,0,800,800);
		context.fillStyle = "yellow";
		//设定图形边框的样式
		context.strokeStyle = "blue";
		//指定线宽
		context.lineWidth = 150;
		context.fillRect(50,50,500,500);
		context.strokeRect(50,50,500,500);
	}
</script>
</head>
<body onLoad="drawFour('canvas')">
   <canvas id="canvas" width="1200" height="560"/>
</body>

2、设计结果

3、分析说明

（1）获取Canvas元素

var canvas = document.getElementById("canvas");

（2）取到上下文

var context = canvas.getContext('2d');

（3）填充绘制边框

context.fillStyle = "#EEEEFF";//填充的样式

（4）设定绘图样式

strokeStyle：图形边框的样式

（5）指定线宽

context.lineWidth = 150;

（6）指定颜色值

（7）绘制正方形

context.fillRect(50,50,500,500);

       context.strokeRect(50,50,500,500);

HTML5之Canvas画正方形的更多相关文章

  1. HTML5之Canvas画圆形

    HTML5之Canvas画圆形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> & ...

  2. canvas 画正方形和圆形

    绘制正方形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. HTML5之Canvas影片广场

    HTML5之Canvas影片广场 1.设计源代码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...

  4. HTML5 Canvas 画虚线组件

    前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...

  5. html5之canvas画图

    导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...

  6. 浅尝HTML5之canvas

    转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和 ...

  7. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  8. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  9. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

随机推荐

  1. sphinx的再创造coreseek的安装过程

    CoreSeek详细安装过程:coreseek-3.2.14.tar.gz下载链接: http://pan.baidu.com/s/1o6DNesE 解压缩安装mmseg分词程序: .tar.gz c ...

  2. Oracle的一些简单语句

    drop后的表被放在回收站(user_recyclebin)里,而不是直接删除掉.这样,回收站里的表信息就可以被恢复,或彻底清除. 1.通过查询回收站user_recyclebin获取被删除的表信息, ...

  3. BZOJ 3551: [ONTAK2010]Peaks加强版 [Kruskal重构树 dfs序 主席树]

    3551: [ONTAK2010]Peaks加强版 题意:带权图,多组询问与一个点通过边权\(\le lim\)的边连通的点中点权k大值,强制在线 PoPoQQQ大爷题解传送门 说一下感受: 容易发现 ...

  4. BZOJ 2064: 分裂 [DP 状压 转化]

    传送门 题意:一开始$n$块面积最后$m$块面积,面积和相等每次可以分裂或者合并,问最少几次 昨天忘发了... 不会.... 考虑最差情况,$n+m-2$所有先合并再分裂 发现只有当前后两个子集相等时 ...

  5. CLR via C#读书日记一' 引用类型和值类型'

    CLR支持两种类型:引用类型和值类型. 引用类型总是在托管堆上分配的,C#的new操作符会返回对象的内存地址——也就是指向对象数据的内存地址. 使用引用类型必须注意到一些问题: 1)内存必须从托管堆上 ...

  6. 《Web Scraping With Python》Chapter 2的学习笔记

    You Don't Always Need a Hammer When Michelangelo was asked how he could sculpt a work of art as mast ...

  7. Websocket原理及使用场景[转载]

    WebSocket的使用场景 社交聊天.弹幕.多玩家游戏.协同编辑.股票基金实时报价.体育实况更新.视频会议/聊天.基于位置的应用.在线教育.智能家居等需要高实时的场景 由轮询到WebSocket 1 ...

  8. 克隆虚拟机以及两台linux机器相互登录：linux学习第四篇

    克隆虚拟机 1.      克隆 之后自己命名克隆的虚拟机并自己选择存放位置,完成克隆 2.      克隆虚拟机之后对新的虚拟机修改网络配置,以免冲突(将配置文件里的UUID去掉,并修改IP地址) ...

  9. laravel服务容器-----深入理解控制反转（IoC）和依赖注入（DI）

    首先大家想一想什么是容器,字面意思就是盛放东西的东西,常见的变量,对象属性都是容器,一个容器能够装什么东西,完全在于你对这个容器的定义.有的容器不仅仅只是存文本,变量,而是对象,属性,那么我们通过这种 ...

  10. 浏览器中显示PPT的展示效果

    发现了一个PPT的WEb展示的方法,在浏览器中载入PDF文件之后,可以实现基于WEB的页面展示,支持全屏与自动播放. https://sharedoc.onk.ninja/ 这不失为一种可行的方式,且 ...