Canvas-line.html
2024-08-24 02:44:26
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<canvas id="canvas" style="border: 1px #ddd solid;display: block;margin:0 auto"></canvas> <script> window.onload = function(){
var canvas = document.getElementById('canvas'); canvas.width = 1024;
canvas.height = 768; if(canvas.getContext('2d')){
var context = canvas.getContext('2d'); // one // 直线状态设置
context.beginPath(); context.moveTo(100,100);
context.lineTo(700,700);
context.lineTo(100,700);
context.lineTo(100,100); context.closePath(); context.lineWidth = 5; // 绘制线 stroke
context.strokeStyle="blue";
context.stroke(); // 填充色 fill
context.fillStyle = "rgb(2,100,30)";
context.fill(); }else{
alert('当前游览器不支持Canvas,请更换游览器后再试!');
}
} /*总结 1.canvas的三个方法 width 、height、context context的方法
moveTo 画笔起始位置
lineTo 经过点
lineWidth 线宽 strokeStyle 画笔色
stroke 绘制 fillStyle 填充色
fill 填充 2.绘制多个图形的时候要使用
context.beginPath
context.closePath */
</script>
</body>
</html>
最新文章
- <;b>;和<;strong>;标签区别
- Objective-c开发中混合使用ARC
- JQuery 操作DOM
- C#制作简易屏保(转)
- sealed的作用
- IO调度器原理介绍
- 新的编辑工具IDE
- 关于*.ashx 处理程序调试时 未能创建类型 错误
- 剑指offer(13)调整数组顺序使奇数位于偶数前面
- 自动化部署必备技能—定制化RPM包
- CC2530低功耗设置(针对终端设备)
- [转]CSKIN 作者分享的图片处理类
- POSIX 线程 – pthread_sigmask
- 【UVa】Wavio Sequence(dp)
- LeetCode OJ:Rotate List(旋转链表)
- Android LCD
- 一 vue开发环境搭建
- web.xml不同的头文件
- 20170212-备份ABAP程序
- bzoj1007 [HNOI2008]水平可见直线 - 几何 - hzwer.com