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画圆形
HTML5之Canvas画圆形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> & ...
- canvas 画正方形和圆形
绘制正方形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- HTML5之Canvas影片广场
HTML5之Canvas影片广场 1.设计源代码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...
- HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...
- html5之canvas画图
导航 前言 基本知识 绘制矩形 清除矩形区域 圆弧 路径 绘制线段 绘制贝塞尔曲线 线性渐变 径向渐变(发散) 图形变形(平移.旋转.缩放) 矩阵变换(图形变形的机制) 图形组合 给图形绘制阴影 绘制 ...
- 浅尝HTML5之canvas
转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和 ...
- 使用javascript和canvas画月半弯
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...
- HTML5在canvas中绘制复杂形状附效果截图
HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...
- HTML5之Canvas时钟(网页效果--每日一更)
今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...
随机推荐
- Apache 配置SSI速记
1. 启用模块 httpd.conf LoadModule filter_module modules/mod_filter.so 2. <Directory 的Options配置中增加Incl ...
- 《Thinking in Java》学习笔记(六)
1.Class相关知识 Class类可以理解为类的图纸,通过Class类可以分析类的结构.构建出类的实例. Class.forName("test.TestClass").newI ...
- bzoj 4591: [Shoi2015]超能粒子炮·改 [lucas定理]
4591: [Shoi2015]超能粒子炮·改 题意:多组询问,求 \[ S(n, k) = \sum_{i=0}^n \binom{n}{i} \mod 2333,\ k \le n \le 10^ ...
- WPF中的Command事件绑定
在项目中使用Command绑定能够使我们的代码更加的符合MVVM模式.不了解的同学可能不清楚,只有继承自ButtonBase类的元素才可以直接绑定Command(Button.CheckBox.Rad ...
- [原]开源的视频转换器，支持gpu，绝对好用ffmpeg的GUI==》dmMediaConverter最新版本2.3
dmMediaConverter is a crossplatform FFmpeg frontend (GUI) exposing some of its features. It is inten ...
- redis requires ruby version 2.2.2的解决方案
在执行gem install redis时 提示: gem install redis ERROR: Error installing redis: redis requires Ruby versi ...
- MIT-线性代数笔记（1-6）
学习目录 第 01 讲 行图像和列图像 第 02 讲 矩阵消元 第 03 讲 矩阵的乘法和逆矩阵 第 04 讲 矩阵的LU 分解 第 05 讲 转置.置换和空间 第 06 讲 列空间和零空间 第 07 ...
- 12小时格式Xcode的-在一个“TimePicker”24 NSDate的设置
我正在使用的NSDate对象,和好了,我的iPhone与24小时格式,所以当我在测试我的应用程序,一切正常,但是,我的一个朋友试图在他的iPhone上的应用程序 CodeGo.net,但12小时格式, ...
- [php]通过http post发送json数据
function http_post_data($url, $data_string) { $ch = curl_init(); curl_setopt($ch, CURLOPT_POST, 1); ...
- 洛谷P3390【模板】矩阵快速幂——矩阵运算入门笔记
作为一个因为极度畏惧数学 而选择成为一名OIer的蒟蒻 终于还是迎来了要面对的这一天 一般题目中矩阵运算好像只用到矩阵乘法 (或许只是蒟蒻我做的题太少) 而且矩阵的乘法也是较难理解的一部分 所以就简单 ...