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画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

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

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

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

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

  4. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  5. HTML5 之Canvas绘制太阳系

    <!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...

  6. HTML5 中canvas支持触摸屏的签名面板

    1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...

  7. 【HTML5】Canvas画布

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  8. html5 之 canvas 相关知识(一)概念及定义

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  9. HTML5之Canvas画布

    先上代码: <canvas width="1000" height="800">浏览器不支持HTML5!</canvas> <sc ...

随机推荐

  1. 使用Swing实现简易而不简单的文档编辑器

    本文通过Swing来实现文档简易而不简单的文档编辑器,该文档编辑器的功能包括: 设置字体样式:粗体,斜体,下划线,可扩展 设置字体:宋体,黑体,可扩展 设置字号:12,14,18,20,30,40, ...

  2. 查看mysql数据库表大小和最后修改时间

    查看mysql数据库表相关信息如表大小.修改更新等信息,可以通过以下方式: 一   show table status like ’table_name‘ ; 二 在infortmation_sche ...

  3. BZOJ 3112 Zjoi2013 防守战线 单纯形

    题目大意: 单纯形*2.. . #include <cmath> #include <cstdio> #include <cstring> #include < ...

  4. Struts2中指定的校验文件不起作用的原因

    转载请注意出处:http://blog.csdn.net/bettarwang/article/details/39801733 我们知道,假设要为某个Action指定校验文件.那么就要将" ...

  5. Android的编译系统

    一.Makefile的主要流程   以下主要流程都在build/core/main.mk里安排.   l  初始化相关的参数设置(buildspec.mk.envsetup.mk.config.mk) ...

  6. hdu 4710 Balls Rearrangement (数学思维)

    意甲冠军:那是,  从数0-n小球进入相应的i%a箱号.然后买一个新的盒子. 今天的总合伙人b一个盒子,Bob试图把球i%b箱号. 求复位的最小成本. 每次移动的花费为y - x ,即移动前后盒子编号 ...

  7. SE 2014年4月29日

    交换网络中有vlan1 到20个vlan,要求使用MSTP技术实现vlan的负载分担. SW2为实例1(vlan1-vlan10)的主根,SW3为备根 SW3为实例2(vlan11-vlan20)的主 ...

  8. Flex读取txt文件里的内容（二）

    Flex读取txt文件里的内容 自己主动生成的文件 LoadTxt-app.xml: <?xml version="1.0" encoding="utf-8&quo ...

  9. cocos2d-x快乐的做让人快乐的游戏3：cocos-2d 3.x中的物理世界

    Cocos2d-x 3.0+ 中全新的封装的物理引擎给了开发人员最大的便捷,你不用再繁琐与各种物理引擎的细节,全然的封装让开发人员能够更快更好的将物理引擎的机制加入�到自己的游戏中,简化的设计是从2. ...

  10. 13、Cocos2dx 3.0三，找一个小游戏开发3.0中间Director ：郝梦主，一统江湖

    重开发人员的劳动成果.转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27706967 游戏中的基本元素 在曾经文章中,我们具 ...