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. 4.ES核心慨念

    一. 和lucene的关系 lucene是最先进,功能最强大的搜索库.但是使用复杂(要深入理解其中原理. elasticsearch,基于lucene,隐藏复杂性,提供简单易用的restful api ...

  2. phpstorm中使用xdebug配置cli模式的调试

    这里略去xdebug的安装,安装很简单可以下载源码包,动态编译进去! 环境: Dev 服务器(IP:192.168.2.100),安装phpstorm,用来做开发任务! Server服务器(IP:19 ...

  3. VUE2.0增删改查附编辑添加model(弹框)组件共用

    Vue实战篇(增删改查附编辑添加model(弹框)组件共用) 前言 最近一直在学习Vue,发现一份crud不错的源码 预览链接 https://taylorchen709.github.io/vue- ...

  4. cnpm,vue等命令不识别的问题废人解决方案

    关于安装的cnpm,vue等不识别的问题 我想了很久然后再网上看了一些教程发现添加系统变量Path没什么用 我就在用户变量里面添加的,完美解决问题 在我的电脑右键->属性->高级系统设置- ...

  5. python学习资料链接

    1.入门与量化:https://www.v2ex.com/t/257297

  6. python进行各类API的使用

    前言: 献上歌曲一首: 因为快要上学了,昨天晚上熬夜.然后今天早上起床 没有什么精神.吃完午饭后开始思考今天写什么好呢 然后逛着逛着逛到了一个API网站.感觉还不错就爬了 0x01: 环境:windo ...

  7. zabbix_server 挂了原因及解决方法（内存溢出）

    14721:20170714:095330.028 [file:dbconfig.c,line:452] zbx_mem_malloc(): out of memory (requested 80 b ...

  8. Linux中的 awk查找日志中的相关记录

    假设要在 api.log.201707201830 文件中,(此文件的多个字段数据以不可见字符^A(键盘上按下Ctrl+V+A)分隔),要输出第70个字段: awk -F '^A' '{print $ ...

  9. windows服务器修改登录密码

    1. 右键我的电脑---管理 2. 计算机管理---本地用户和组--用户 3. 右键administrator用户,选择修改密码 4. 点击继续进入下一步 5. 输入新密码并保存

  10. Math.abs(~2018)，掌握规律！

    Math.abs(~2018) 这要用到一些计算机的基础知识. Math.abs(x)指的是返回一个数的绝对值,而关键在"~2018",这是取反操作符,故取相反数得结果为-2018 ...