|
canvas元素专门用来绘制图形的 2引入绘画脚本 3使用draw进行绘画 绘制： 1获取canvas画布 getElementById 2获得上下文getContext() 参数设置成2D 3内部填充fill或者外部绘制边框stroke 4设置绘制样式fillStyle填充颜色 strokeStyle边框颜色 5设置画笔宽度 context 的lineWidth 6设置颜色值 #000000 black rgba(0,0,0) rgba(0,0,0,0.8)第四个是透明度 7绘制矩形 context.fillRect(x,y,width,height) context.strokeRect(x,y,width,height) x,y表示起点坐标
html5源代码： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas绘制矩形</title>
<script type="text/javascript" src="canvas.js"></script>
<style type="text/css">
body{
margin:0;
padding:0;
}
</style>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="400" height="300">
</canvas>
</body>
</html>
javascript源代码：
function draw(id) {
var canvas=document.getElementById(id);
var context=canvas.getContext('2d');
context.fillStyle="#000000";
context.strokeStyle="#f60";
context.lineWidth=5;
context.fillRect(0,0,400,300);
context.strokeRect(50,50,180,120);
}
分享知识，分享快乐！希望中国站在编程之巅！ ----融水公子 公众微信号：rsgz520 360图书馆馆号：rsgz002.360doc.com
|
