<!DOCTYPE html>
<Html>
<head>
<meta charset="UTF-8"/>
<script>
function drawLine(){
// 取得canvas对象及其上下文对象
var canvas=document.getElementById("drawLine");
var context=canvas.getContext('2d');
//开始启动画笔
context.beginPath();
//开始点
context.moveTo(70,140);
//结束点
context.lineTo(140,70);
//绘制
context.stroke();
}
window.addEventListener("load",drawLine,true);
</script>
</head>
<title>html5绘制一条直线</title>
<body>
<div id="info"></div>
<canvas id="drawLine" style="border:1px solid;width:200px;height:200px;"></canvas>
<script>
//检测浏览器是否支持HTML5
try{
document.createElement("canvas").getContext("2d");
document.getElementById("info").innerHTML="该浏览器支持HTML5";
}catch(e){
document.getElementById("info").innerHTML="该浏览器不支持HTML5"
}
</script>
</body>
</Html>
分享到：
相关推荐
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上直接绘制图形，从而创建交互式的、动态的视觉效果。这个"html5-canvas-loader.rar"文件很可能包含了一个使用HTML5 Canvas技术实现的加载器示例。让我们...
4. **绘制圆环**：首先绘制一个圆形，然后使用`context.clearRect()`清除中心部分，保留圆环。`context.arc()`的`startAngle`和`endAngle`参数控制着绘制的圆弧范围。 5. **绘制三角形**：通过`moveTo()`和`lineTo...
"canvas 绘制旋转直线"这个主题聚焦于如何利用Canvas API来绘制一条带有旋转角度的直线。以下是对这个知识点的详细阐述： 1) **Canvas绘图基础** Canvas是一个基于矢量图形的二维画布，它通过JavaScript来控制图形...
以下是对HTML5 Canvas绘制几何图形动画特效的详细讲解。 1. **Canvas API基础** HTML5 Canvas是一个基于矢量图形的画布，通过JavaScript进行编程操作。它提供了`<canvas>`标签，该标签在页面上创建一个矩形区域，...
在Delphi编程环境中，Canvas是一个非常重要的概念，它是GDI（图形设备接口）的一部分，用于在窗体、控件或其他图形表面进行绘图操作。在这个名为"Canvas1-2-3-4.rar"的压缩包中，我们能看到作者通过Canvas实现了四个...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的视觉体验。在这个“五彩发光线条游走散开动画特效”中，我们主要涉及了Canvas的一些核心概念和技术，包括路径绘制、...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上直接绘制图形，从而创建出丰富的交互式用户体验。EaselJS是基于HTML5 Canvas的一个JavaScript库，它为Canvas提供了一个更加高级、易于使用的API，使得...
在这个“html5 canvas绘制沙丁鱼群动画特效”中，我们将深入探讨如何利用HTML5 Canvas API来创建逼真的海洋生物动画，特别是沙丁鱼群的模拟。 首先，了解Canvas的基本用法至关重要。Canvas是一个基于矢量图形的元素...
- **直线**：通过`context.moveTo(x1, y1)`移动到起点，然后用`context.lineTo(x2, y2)`绘制到终点，可以创建一条直线。 - **橡皮擦**：实现橡皮擦效果通常是在改变`context.strokeStyle`或`context.fillStyle`后...
这个"HTML5_canvas绘制动态树视图 类似结构图.rar"压缩包包含了一个利用Canvas实现的动态树形视图示例，它能帮助我们理解如何用HTML5的Canvas API构建交互式的数据可视化应用。 在Canvas上绘制动态树视图，首先需要...
在这个“html5 canvas绘制曲线动画特效.zip”压缩包中，包含了一个名为“demo.html”的文件，我们可以推测这是一个展示如何使用Canvas API创建曲线动画特效的示例。 Canvas API是一个基于矢量图形的JavaScript接口...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制。"html5 canvas钢笔绘制线条创建导火线燃烧动画效果"是一个利用Canvas API实现的创意动画，通过模拟导火线燃烧的过程，为用户带来...
- Canvas元素：HTML5新增的Canvas元素提供了通过脚本（通常为JavaScript）动态绘制图形的能力，包括2D图形和位图。 - 绘图上下文（context）：使用`getContext('2d')`方法获取Canvas元素的绘图上下文，它是进行...
如果两点间的距离小于特定值，我们就使用`lineTo()`方法在画布上画出一条线。同时，可以添加一些动画效果，让圆点在画布上随机移动，使得连线效果更加生动： ```javascript function drawConnections() { ctx....
总之，“html5 canvas绘制线条组合几何体动画特效”是一个展示Canvas API强大功能的实例，它结合了JavaScript和HTML，为网页带来了生动有趣的视觉效果。通过学习和实践这样的案例，开发者可以深入了解Canvas的潜力，...
// 绘制一条直线 ctx.stroke(); // 实际绘制路径 ``` - **绘制矩形**： ```javascript ctx.rect(x, y, width, height); // 定义矩形 ctx.fill(); // 填充矩形 ctx.stroke(); // 绘制矩形边框 ``` - **绘制...
这个“HTML5 Canvas绘制灰太狼图像效果”是一个利用Canvas API实现的实例，展示了如何通过编程方式创建生动的图像。下面我们将深入探讨HTML5 Canvas的基本概念、绘图方法以及如何实现灰太狼图像的绘制。 1. HTML5 ...
- `lineTo(x, y)`：从当前位置画一条直线到指定的(x, y)坐标。 - `stroke()`：绘制当前路径。不填充，只描边。 3. **监听鼠标事件**： - `addEventListener`：用于添加事件监听器，如`canvas.addEventListener('...
4. `lineTo(x, y)`：从当前点绘制一条直线到指定的坐标点（x, y）。 5. `stroke()`：根据当前的描边样式画出路径。 6. `clearRect(x, y, width, height)`：清除画布上指定矩形区域的内容，用于擦除之前的线条，实现...