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. Threejs 的场景查看 - 几个交互事件库助你方便查看场景

    Threejs 的场景查看 - 几个交互事件库助你方便查看场景 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&q ...

  2. SecureCRT 连接虚拟机Linux

    SecureCRT 连接虚拟机Linux   最近在学习linux,在学习中遇到了一些问题,现总结一下. 虚拟机我用的是VirtualBox,完美支持中文,可以在电脑中创建虚拟机环境,上手非常简单.具 ...

  3. 微信支付.net官方坑太多，我们来精简

    原文:微信支付.net官方坑太多,我们来精简 微信支付官方坑太多,我们来精简 我把官方的代码,打包成了 an.wxapi.dll. 里面主要替换了下注释.呵呵.然后修改了几个地方. 修改一.Confi ...

  4. 用 C++ 标准模板库（STL）的 vector 实现二叉搜索树（BST）

    本文由 Justme0翻译自 Code Project 转载请参见文章末尾处的要求. 介绍 众所周知,要建一棵树,我们需要关注它的内存分配与释放.为了避开这个问题,我打算用C++ STL(vector ...

  5. Android ----制作自己的Vendor

    Android源代码使用一个可定制的编译系统来生成 特定的,针对自己硬件平台的Android系统,比方不使用缺省的out/target/prodect/generic文件夹, 本文档简介了这个编译系统 ...

  6. Filter技术+职责链模式

    Filter是一个过滤器,存在Webclient与请求的资源之间.这里的资源能够说是jsp或servlet.它的作用就是在请求达到资源之前,先对请求进行预处理.而且也能够对servlet处理后的res ...

  7. 【Python】Coding the Matrix:Week 5 Perspective Lab

    这个Lab的内容光是说明就有7页之巨,我反复看了很久才看懂一点点,Lab主要完成的是从不同坐标系表示之间变换的方法. 原始的图片,从Camera basis的表示转换成WhiteBoard basis ...

  8. 【C++】动态开辟二维数组

    二维数组在内存中的分配例如以下: C方式呈现: <span style="font-size:18px;"> #include <iostream> usi ...

  9. eclipse failed to create the java virtual machine 问题图文解析（转）

    clipse failed to create  the java virtual  machine 解决方法: 1.问题现象 2.java虚拟机初始化失败!寻找eclipse解压路径 3.寻找ecl ...

  10. dell N5010

    Inspiron N5010Microsoft Windows 10 企业版 (64位) (英特尔)Intel(R) Core(TM) i3 CPU       M 370  @ 2.40GHz(24 ...