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. python之编码问题

    二进制------>ASCII:只能存英文和拉丁字符.一个字符占用一个字节,8位------------>gb2312:智能6700多个中文, 1980年 gbk1.0:存了2万多字符 1 ...

  2. centos 6.5静态网址简单配置

    详细配置参数参考如下: DEVICE=eth0HWADDR=08:00:27:F1:72:C9TYPE=EthernetUUID=dab98425-fa46-4a5b-8f47-cf846d4acb3 ...

  3. 原生JS实现图片轮播

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Jquery DataTable控制显示列，导出EXCEL

    1.初始化 var table = $('#table').DataTable({ "data": data[0].DATA, "columns": data[ ...

  5. 洛谷 [P3110] 驮运

    题目略带一点贪心的思想,先跑三遍最短路(边权为一,BFS比SPFA高效) 一起跑总比分开跑高效,枚举两人在何点汇合,输出最小值. #include <iostream> #include ...

  6. H5动画

    1.参考:http://blog.csdn.net/whqet/article/details/42911059?readlog https://developer.mozilla.org/zh-CN ...

  7. 使用Spring Boot搭建应用开发框架(一) —— 基础架构

    Spring的简史 第一阶段:XML配置,在Spring1.x时代,使用Spring开发满眼都是xml配置的Bean,随着项目的扩大,我们需要把xml配置文件分放到不同的配置文件里,那时候需要频繁的在 ...

  8. GitLab的安装及使用教程

    1.配置yum源 vim /etc/yum.repos.d/gitlab-ce.repo 复制以下内容: [gitlab-ce] name=gitlab-ce baseurl=http://mirro ...

  9. php实现粘贴截图并完成上传功能

    <?php header("Access-Control-Allow-Origin:*"); $url = 'http://'.$_SERVER['HTTP_HOST']; ...

  10. Git 上传 GitHub

    1.下载 2.安装 3.功能识别 3-1.查看git版本  git  --version 3-2.移除原来的版本 yum  remove git 4.配置 4-1.用户配置信息 git config ...