canvas基础练习(画线)
2015-11-26 13:20
239 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas</title> <style> body{ background:#808080; } #canvas{ background:#FFFFFF; } </style> <script> window.onload = function(){ //获取canvas画布 var canvas = document.getElementById('canvas'); //获取2d绘图环境 cxt = canvas.getContext('2d'); //画直线(绘图路径) //开始路径 cxt.beginPath(); //画端点 cxt.moveTo(100,100); cxt.lineTo(200,200); cxt.lineTo(300,200); //闭合路径 cxt.closePath(); //画线 cxt.stroke(); } </script> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> </body> </html>
效果图:
相关文章推荐
- Python2.7本地发布模块(modules)笔记
- [BZOJ3339] Rmq Problem&&[BZOJ3585] mex
- RGB-HSV颜色空间
- 免费字典api ,查询汉字完整信息
- js 实现 C# 的 format 方法
- WordPress4分页
- 【详解】号码排重----判断字符串中是否包含某个子字符串
- 美国社会的自信
- [leetCode]Inorder Successor in BST
- [LeetCode288]Unique Word Abbreviation
- ios面试题整理
- Map线程安全几种实现方法
- linux内核参数优化
- nginx 基础文档
- 旋转华尔兹,nodejs的背后
- Shell中的数组
- SVN命令使用详解
- LIS
- 使用PhotoShop制作gif动画全过程
- 工作学习小记—如何将多个.a静态库合并成一个.a静态库