html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="24.js"></script>
<style type="text/css">
body{ margin:0; padding:0;}
</style>
</head>
<body onBlur="draw('canvas');">
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>
js
// JavaScript Document
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = "green";
context.strokeStyle = "#fff";
context.lineWidth = 5;
context.fillRect(0,0,400,300);
context.strokeRect(50,50,180,120);
context.strokeRect(110,110,180,120);
}
效果图：
相关推荐
第二部分 基础知识篇 第2章 canvas基本功能 / 20 2.1 绘制基本图形 / 20 2.1.1 画线 / 20 2.1.2 画矩形 / 22 2.1.3 画圆 / 24 2.1.4 画圆角矩形 / 26 2.1.5 擦除canvas画板 / 27 2.2 绘制复杂图形 / 28 ...
第2章 canvas api 22 2.1 html5 canvas概述 22 2.1.1 历史 22 2.1.2 canvas是什么 23 2.1.3 canvas坐标 23 2.1.4 什么情况下不用canvas 24 2.1.5 替代内容 24 2.1.6 css和canvas 24 2.1.7 浏览器对...
第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 2.1.2 canvas是什么 23 2.1.3 canvas坐标 23 2.1.4 什么情况下不用canvas 23 2.1.5 替代内容 24 2.1.6 CSS和canvas 25 2.1.7 浏览器对...
RectangleDemo 矩形绘制示例。 ReflectionEffectDemo 反射效果示例。 SizePlacementDemo 图像位置示例。 TileModeDemo TileMode枚举示例。 TransformDemo 变换使用示例。 VisualBrushDemo1 ...
第二部分 为iphone设计网页 第3章 为iphone重新开发网页22 3.1 iphone视区23 3.1.1 更改整站视区24 3.1.2 更改局部视区24 3.1.3 视区属性和常量25 3.2 实现“iphone友好的”网页26 3.2.1 避免缺少...
第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 2.1.2 canvas是什么 23 2.1.3 canvas坐标 23 2.1.4 什么情况下不用canvas 24 2.1.5 替代内容 24 2.1.6 CSS和canvas 24 2.1.7 浏览器对HTML5 Canvas的...
第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 2.1.2 canvas是什么 23 2.1.3 canvas坐标 23 2.1.4 什么情况下不用canvas 24 2.1.5 替代内容 24 2.1.6 CSS和canvas 24 2.1.7 浏览器对HTML5 Canvas的...
第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 2.1.2 canvas是什么 23 2.1.3 canvas坐标 23 2.1.4 什么情况下不用canvas 24 2.1.5 替代内容 24 2.1.6 CSS和canvas 24 2.1.7 浏览器对HTML5 Canvas的...
第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 2.1.2 canvas是什么 23 2.1.3 canvas坐标 23 2.1.4 什么情况下不用canvas 24 2.1.5 替代内容 24 2.1.6 CSS和canvas 24 2.1.7 浏览器对HTML5 Canvas的...
第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 2.1.2 canvas是什么 23 2.1.3 canvas坐标 23 2.1.4 什么情况下不用canvas 24 2.1.5 替代内容 24 2.1.6 CSS和canvas 24 2.1.7 浏览器对...
第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 2.1.2 canvas是什么 23 2.1.3 canvas坐标 23 2.1.4 什么情况下不用canvas 24 2.1.5 替代内容 24 2.1.6 CSS和canvas 24 2.1.7 浏览器对...
第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 2.1.2 canvas是什么 23 2.1.3 canvas坐标 23 2.1.4 什么情况下不用canvas 24 2.1.5 替代内容 24 2.1.6 CSS和canvas 24 2.1.7 浏览器对...
第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 2.1.2 canvas是什么 23 2.1.3 canvas坐标 23 2.1.4 什么情况下不用canvas 24 2.1.5 替代内容 24 2.1.6 CSS和canvas 24 2.1.7 浏览器对...
第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 2.1.2 canvas是什么 23 2.1.3 canvas坐标 23 2.1.4 什么情况下不用canvas 24 2.1.5 替代内容 24 2.1.6 CSS和canvas 24 2.1.7 浏览器对...
// 代表第二种可能出现的方块组合：反Z [ {x: TETRIS_COLS / 2 + 1 , y:0 , color:2}, {x: TETRIS_COLS / 2 , y:0 , color:2}, {x: TETRIS_COLS / 2 , y:1 , color:2}, {x: TETRIS_COLS / 2 - 1 , y:1 , color...
第3章 设计网页文本内容 41 教学录像：29分钟 3.1 标题文字的建立 42 3.1.1 标题文字标记<h> 42 3.1.2 标题文字的对齐方式——align 43 3.2 设置文字格式 44 3.2.1 设置文字字体——face 44 ...
第1章 WPF概述 1 1.1 理解Windows图形 1 1.1.1 DirectX：新的图形引擎 1 1.1.2 硬件加速与WPF 2 1.2 WPF：高级API 4 1.2.1 分辨率无关性 5 1.2.2 WPF的演化 9 1.2.3 Windows窗体将继续保留 11 1.2.4 DirectX...