HTML5之Canvas影片广场
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影片广场的更多相关文章
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- HTML5在canvas中绘制复杂形状附效果截图
HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...
- HTML5之Canvas时钟(网页效果--每日一更)
今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...
- HTML5 画布canvas元素
HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...
- HTML5 之Canvas绘制太阳系
<!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...
- HTML5 中canvas支持触摸屏的签名面板
1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...
- 【HTML5】Canvas画布
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- html5 之 canvas 相关知识(一)概念及定义
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- HTML5之Canvas画布
先上代码: <canvas width="1000" height="800">浏览器不支持HTML5!</canvas> <sc ...
随机推荐
- php 简易验证码(GD库)
论坛中为了防止灌水,出现了非常多的验证码的插件.如今这里介绍一个非常easy的自己定义验证码函数,这个验证码实现的原理就是通过php扩展的gd库来实现的. 给出百度百科对验证码的定义"验证码 ...
- Servlet(七)生成验证码
1.ImageCode.java package com.hunhun.utils; import java.awt.Color; import java.awt.Font; import java. ...
- POJ训练计划3080_Blue Jeans(串处理/暴力)
Blue Jeans Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11542 Accepted: 4962 Descr ...
- spring集成 JedisCluster 连接 redis3.0 集群
最近在公司做了 jedisCluster整合spring 的配置, 分享如下 客户端采用最新的jedis 2.7 1. maven依赖: <dependency> <groupId& ...
- hdu 4404 Worms(多边形与圆的交)
求出爆炸点的坐标,就成了多边形与圆相交面积的模板题了... #include<algorithm> #include<iostream> #include<cstring ...
- Android 自己定义View (二) 进阶
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24300125 继续自己定义View之旅.前面已经介绍过一个自己定义View的基础 ...
- Deploy Oracle 10.2.0.5 DataGuard on Red Hat Enterprise Linux 6.4
系统:Red Hat Enterprise Linux 6.4 数据库:Oracle 10.2.0.5.0 Patch Set 4 主机:10dg1 192.168.1.91 10dg2192.168 ...
- Redis集群_3.redis主从自动切换Sentinel(转)
Redis SentinelSentinel(哨兵)是用于监控redis集群中Master状态的工具,其已经被集成在redis2.4+的版本中 一.Sentinel作用:1):Master状态检测 2 ...
- nutch搏斗之一
nutch搏斗之一 问题描述: 在用nutch1.0做generate 包括5亿url的crawldb时,它默认按照64M分块,分成777个map task,在运行的后期出现 Could not fi ...
- linux中怎样设置DHCP
linux怎样设置DHCP 环境:RH linux 9.0 使用linux下经常使用的dhcpd包. 最新版本号 dhcp3.0.5 下载地址: 下载 1.安装: 先拷贝dhcp-3.0.5.tar. ...