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. ajaxterm不好还是gateone好

    http://pkgs.org/centos-5-rhel-5/epel-i386/Ajaxterm-0.10-8.el5.noarch.rpm.html Web SSH 客户端Ajaxterm安装 ...

  2. Qrcode生成二维码支持中文,带图片,带文字

    1.下载Qrcode库源码, 下载地址:http://www.codeproject.com/Articles/20574/Open-Source-QRCode-Library2.打开源码时, 部分类 ...

  3. 蓝桥杯 【dp?】.cpp

    题意: 给出一个2*n的方格,当刷完某一个方格的漆后可以且只可以走到相邻的任何一格,即上 下 左 右 左上 左下 右上 右下.可以从任意一个格子开始刷墙,问有多少种刷法,因为随着n的增大方案数会变多, ...

  4. 【Java 它 JVM】对象的创建过程

    虚拟机会new 指令: 1.检查指令的参数可在对类的符号引用的恒定饮食定位,并检查是否已装上代表这个类的符号引用.分析和初始化.假设没有.您必须运行相应的类加载过程. 2.类加载通过审查,虚拟机将分配 ...

  5. [Oracle] - 性能优化工具（4） - AWRDD

    AWRDD是用于比較两个AWR快照,从而获得不同一时候期的性能. 运行例如以下语句获得AWRDD: @?/rdbms/admin/awrddrpt.sql 2025 23 2月 2014 07:12 ...

  6. Thinkphp常用标签

    告:在使用下列所说的任何标签库都需要 HTML第一行加入 <tarlib name=”cx,html” /> 如果想单独引入cx标签库就直接写成<tarlib name=”cx” / ...

  7. Extjs4.0.7 实现Grid的嵌套

    网上相关资料非常少,我看过的大多是Extjs 3.0 急以前版本的解决方案. 比如:http://mikhailstadnik.com/ext/examples/nested-grid.htm  (E ...

  8. 【leetcode】Candy（python）

    题目要求的比它的邻居比自己奖励,因此,我们有最少一个多的.所有我们可以找到所有的坑,凹坑例如,存在以下三种情况. 找到全部的凹点后,我们就能够从凹点处開始向左右两个方向依次查找递增序列.当中每一个高的 ...

  9. Golang初学者的资源整理

    看了汪汪汪不是我的语言的GO语言零基础入门资料整理,个人感觉还不够全面,忍不住过来补充一些内容. 网站教程: GO语言编程 and GO语言开发2048 from 实验楼Go语言后台应用开发 form ...

  10. asp.net Form 认证【转】

    第一部分 如何运用 Form 表单认证 一.        新建一个测试项目 为了更好说明,有必要新建一个测试项目(暂且为“FormTest”吧),包含三张页面足矣(Default.aspx.Logi ...