学习html5 中的canvas(一)
2024-08-27 02:34:59
1、canvas画直线
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');//2d的效果
cans.moveTo(20,30);//第一个起点
cans.lineTo(120,90);//第二个点
cans.lineTo(220,60);//第三个点(以第二个点为起点)
cans.lineWidth=3;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
最新文章
- centos7 systemctl命令
- wpf viewmodel之间的通信
- CSS图片去色
- matlab提速技巧(自matlab帮助文件)
- thinkphp T方法
- 证明中序遍历O(n)
- Spring的<;context:property-placeholder.../>;在junit中不起作用,失效,解决方法
- kbengine 常见问题汇总
- iOS学习——iOS 整体框架及类继承框架图
- JavaScript 轮播图实例
- c#批量抓取免费代理并验证有效性
- 从jvm角度看懂类初始化、方法重写、重载。
- 【转】在Express项目中使用Handlebars模板引擎
- JS打开新的窗口
- myEclipse中项目无法部署到tomcat
- python 判断两个列表中相同和不同的元素
- spring boot区分生产环境和开发环境
- 面向对象程序设计(Java)本学期课程改革说明
- 使用EventLog Analyzer进行VMware日志管理
- 2018.09.15 hdu3018Ant Trip(欧拉路)