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. SuSE(SLES)安装配置syslog-ng日志server，可整合splunk

    Update History 2014年04月25日 - 撰写初稿 引言 在自己主动化部署AutoYast.自己主动化监控BMC Patrol双方面形成雏形后.日志的收集.管理.分析也顺势成为我们须要 ...

  2. php 简易验证码(GD库)

    论坛中为了防止灌水,出现了非常多的验证码的插件.如今这里介绍一个非常easy的自己定义验证码函数,这个验证码实现的原理就是通过php扩展的gd库来实现的. 给出百度百科对验证码的定义"验证码 ...

  3. 如何搭建NTP服务（转）

    最近,在搭建Oracle RAC过程中,需要用到DNS和NTP,其中,DNS用于域名.IP管理,NTP用于时间同步.其实,很久以前搭建过这两种服务,但技术,本质上,符合“用进废退”的客观规律.用得越频 ...

  4. Oracle定时执行存储过程（转）

    定时执行存储过程在平时开发中经常会用到,年前的时候自己也做了一个,由于时间关系一直没能记录,现记录下来.       首先用一个完整的例子来实现定时执行存储过程. 任务目标:每小时向test表中插入一 ...

  5. 使用mysql-mmm实现MySQL高可用集群

    背景:之前实现的mysql同步复制功能(见笔者之前文章http://blog.csdn.net/kingofworld/article/details/39210937)仅仅是双机热备功能,还不能做到 ...

  6. Drools学习笔记-01-在eclipse indgo集成Drools5.5

    1.1.条件 Drools它是一个基于Java开源规则引擎.因此,使用Drools以及前需要安装在开发机器JDK周边环境,Drools5.5需要JDK版本号的1.5或者更多. 1.2.开发环境搭建 大 ...

  7. SqlServer操作远程数据库

    exec sp_addlinkedserver 'srv2','','mssql2008','服务器IP' exec sp_addlinkedsrvlogin 'srv2','false',null, ...

  8. Unobtrusive Ajax

    ASP.NET MVC之Unobtrusive Ajax(五)   前言 这一节我们来讲讲Unobtrusive中的Ajax提交,大部分情况下我们是利用JQuery来进行Ajax请求,当然利用JQue ...

  9. U7Linux文件与目录管理

    1. .:代表当前层目录． ..:代表上一层目录． -:代表前一个工作目录． ~:代表目前用户所在的主文件夹． ~account:代表account这个用户的主文件夹． 2.pwd:显示当前目录． p ...

  10. MySQL 触发器例子（两张表同步增加和删除）

    以下两个例子来自:http://www.cnblogs.com/nicholas_f/archive/2009/09/22/1572050.html实测有效,但是原帖的分隔符不正确,因此稍作修改.其中 ...