码迷,mamicode.com
首页 > 其他好文 > 详细

canvas

时间:2017-07-10 23:41:23      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:ima   ace   mil   eee   idt   mon   family   har   return   

<canvas>是一个绘制图形的 HTML 元素,但它必须使用脚本语言(通常是Javascript)绘制图形。

下面是canvas的一个小示例:

HTML:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./script.js"></script>
</head>
<body onload="draw(canvas)">
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

-----------------------------------我是华丽丽的分割线-----------------------------------------------------------------

script.js:

function draw(){
var canvas = document.getElementById("canvas");//获取canvas
if(canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#eee";//填充颜色
//context.fillRect(x,y,width,height);//x指矩形起点横坐标,y指矩形起点纵坐标,width矩形长度,height矩形高度,坐标原点为画布最左上角
context.fillRect(0,0,400,300);
context.fillStyle="red";//设定图形样式
context.strokeStyle="blue";//设定图形边框样式
context.lineWidth="1";//边框宽度
context.fillRect(50,50,100,100);//绘制矩形
context.strokeRect(50,50,100,100);//绘制矩形边框
}

效果图:

技术分享

canvas

标签:ima   ace   mil   eee   idt   mon   family   har   return   

原文地址:http://www.cnblogs.com/lushj/p/7147896.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!