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. Hadoop学习笔记五

    一.uber(u:ber)模式 MapReduce以Uber模式运行时,所有的map,reduce任务都在一个jvm中运行,对于小的mapreduce任务,uber模式的运行将更为高效. uber模式 ...

  2. RandomAccess接口的使用

    RandomAccess在类Collections的shuffle()方法中的使用:(jdk源码如下) /** * Randomly permute the specified list using ...

  3. 再看Java基本类型

    Java中的基本类型可以分为三类,字符类型char,布尔类型boolean以及数值类型byte.short.int.long.float.double. 数值类型又可以分为整数类型byte.short ...

  4. BZOJ 3684: 大朋友和多叉树 [拉格朗日反演 多项式k次幂 生成函数]

    3684: 大朋友和多叉树 题意: 求有n个叶子结点,非叶节点的孩子数量\(\in S, a \notin S\)的有根树个数,无标号,孩子有序. 鏼鏼鏼! 树的OGF:\(T(x) = \sum_{ ...

  5. Java并发系列[5]----ReentrantLock源码分析

    在Java5.0之前,协调对共享对象的访问可以使用的机制只有synchronized和volatile.我们知道synchronized关键字实现了内置锁,而volatile关键字保证了多线程的内存可 ...

  6. python数据分析工具包（3）——matplotlib（一）

    前两篇文章简单介绍了科学计算Numpy的一些常用方法,还有一些其他内容,会在后面的实例中学习.下面介绍另一个模块--Matplotlib. Matplotlib是一个Python 2D绘图库,试图让复 ...

  7. go 开发环境安装教程 windows

         首先进入go 语言官网下载最新安装包,我目前安装的版本是 1.8.3版本:go1.8.3.windows-amd64.msi 如果下载慢,这个是百度云地址:https://pan.baidu ...

  8. 关于 JS 拖拽功能的冲突问题及解决方法

    前言 我在之前写过关于 JS 拖拽的文章,实现方式和网上能搜到的方法大致相同,别无二致,但是在一次偶然的测试中发现,这种绑定事件的方式可能会和其它的拖拽事件产生冲突,由此产生了对于事件绑定的思考.本文 ...

  9. 分享一个集成在项目中的REST APIs文档框架swagger

    1 为什么是使用swagger? 1-1 当后台开发人员开发好接口,是不是还要重新书写一份接口文档提给前端人员,当然对于程序员最不喜欢的就是书写文档(当然文档是必须的,有利于项目的维护) 1-2 当后 ...

  10. linux 命令：tr 的简单使用

    工作的需要,用到了tr命令,因为用到的次数不是很多,怕以后忘记了百度,就自己总结下.例子什么的,copy linux shell 脚本攻略这本书. tr:常用选项 -c 用字符串1中字符集的补集替换此 ...