您的位置：首页 > Web前端 > HTML

html 5 画布的自学

2015-09-16 22:08 686 查看 
<!DOCTYPE HTML>
<html>
<head>
<title>my canvas learning</title>
</head>

<body>
<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>

<script type="text/javascript">
//通过 id 获取文档对象
var canvas = document.getElementById('myCanvas');
//获取 上下文环境，用来操作
var ctx = canvas.getContext('2d');
//指定填充颜色
ctx.fillStyle = '#0065BD';
//填充矩形：(0,0)开始，宽度125像素，高度75像素
ctx.fillRect(0,0,125,75);//Method
//开启画路径的过程
ctx.beginPath();
//设置线的宽度
ctx.lineWidth = "15";
//设置线的颜色
ctx.strokeStyle="white";
//用moveTo和lineTo描绘1
ctx.moveTo(0,0);
ctx.lineTo(125,75);
//用moveTo和lineTo描绘2
ctx.moveTo(125,0);
ctx.lineTo(0,75);
//开始渲染画笔
ctx.stroke();
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5 h5
相关文章推荐
新的分享
章节导航