HTML5之Canvas影片广场

时间:2022-02-16 20:43:45

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、设计结果

HTML5之Canvas影片广场

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);

版权声明:本文博主原创文章,博客,未经同意不得转载。