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. Hadoop大数据面试--Hadoop篇

    本篇大部分内容參考网上,当中性能部分參考:http://blog.cloudera.com/blog/2009/12/7-tips-for-improving-mapreduce-performanc ...

  2. hdu4105  Electric wave

    Electric wave Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...

  3. 【CSS3】transform-origin原点旋转

    忙乱, 点 -moz-transform-origin: 0 0; -webkit-transform-origin:0 0; -o-transform-origin:0 0; 以右上角给原点 -mo ...

  4. 二、第一个ExtJS程序:helloExtJS

    开发前的准备 下载并解压ExtJS包后,能够得到下图的文件文件夹结构: 在实际开发过程中并不须要全部的文件和文件夹,所需的包括例如以下文件夹就可以: 若使用eclipse进行开发,仅仅需将上述文件拷贝 ...

  5. POJ 2948 DP

    一个row*col的矩阵,每一个格子内有两种矿yeyenum和bloggium,而且知道它们在每一个格子内的数量是多少.最北边有bloggium的收集站,最西边有 yeyenum 的收集站.如今要在这 ...

  6. IOS开发应用

    IOS开发应用 我的第一个IOS开发应用 1. 需求描述 2. 开发环境介绍 3. 创建一个工程 4. 工程配置介绍 5. 目录结构介绍 6. 界面设置 7. 关联输入输出 8. 关联事件代码 9.  ...

  7. html 跳转页面，同时跳转到一个指定的位置

    比如我现在 a.html 的时候,我想跳转到 b.html ,并且是 b.html 的某一个位置,用 <a href=>, a.html里: <a href="b.html ...

  8. java中取得上下文路径的方法

    1.request.getContextPath(); 获得web根的上下文环境 如 /tree tree是web项目的root context 2.可以在servlet的init方法里 String ...

  9. Setup Git Server in CentOS 6.3

    0. Environment: Server machine: CentOS 6.3 x86 Client machine: Windows 10 Pro x86_64 1. Install ssh ...

  10. sublime text 2安装及使用

    1.首先下载Sublime Text:http://www.sublimetext.com/ 2.基本设置.參考此文:http://blog.jobbole.com/40660/ { "au ...