<html>
<head>
<script type="application/x-javascript">
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//下面两种方式都可以设置颜色
//方法1：
ctx.fillStyle = "red";
//方法2：
//ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; // 红0绿0蓝100 透明度 0.5
ctx.fillRect (100, 200, 1, 150); //X座标200Y座标300，X长度1,Y长度150
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="1000" height="1000"></canvas>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(95,80,35,0,Math.PI,true);
ctx.moveTo(60,80);
ctx.lineTo(30,80);
ctx.moveTo(200,80);
ctx.arc(165,80,35,0,Math.PI,false);
ctx.stroke();
}
}
</script>
</head>
<body onload="draw();">
<canvas id="tutorial" width="1000" height="1050"></canvas>
</body>
</html>
分享到：
相关推荐
html2canvas是一款强大的JavaScript库，能够将HTML元素转换成Canvas图像。它不依赖于服务器端的渲染，完全在客户端完成，这对需要截图网页或网页元素的场景非常有用。html2canvas支持各种浏览器，包括Firefox 3.5+、...
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、...
这个效果不仅能够为网页增添视觉吸引力，而且展示了Canvas和CSS的强大结合。以下是对实现这一效果所需技术的详细解释。 首先，让我们了解什么是Canvas。Canvas是HTML5引入的一个绘图元素，允许开发者在网页上动态...
这个“canvas简单实例详解”将带你深入了解Canvas的基本用法和常见操作，为你的网页开发添加丰富的视觉效果。 一、Canvas基本结构 Canvas元素在HTML中以`<canvas>`标签表示，可以通过ID来引用并进行JavaScript操作...
在IT领域，Canvas自定义编辑器是一个非常关键的工具，特别是在网页开发中，它允许开发者创建高度交互式的、基于浏览器的多媒体编辑环境。Canvas是HTML5的一个重要元素，提供了在网页上绘制图形的能力，而自定义编辑...
本文将详细介绍如何使用Canvas进行文字与图片的合成，通过一个简单的入门Demo来展示具体实现过程。 首先，我们需要在HTML文档中创建一个`<canvas>`元素，并为其分配一个ID以便于在JavaScript中引用： ```html ...
在`canvas`上绘制完视频帧后，我们可以使用`toDataURL()`方法将`canvas`的内容转换为一个数据URL，该URL表示的是一个Base64编码的图像，通常以`data:image/jpeg;base64,`或`data:image/png;base64,`开头。这可以被...
在微信小程序中，Canvas是一个非常重要的组件，它允许开发者在页面上进行动态绘图，创建丰富的交互体验。这个"小程序canvasDemo"项目就是一个用于展示如何使用canvas功能的实例。在这个项目中，我们将深入探讨以下几...
- 最后，通过Canvas的toDataURL方法，可以将绘制好的Canvas内容转换为data URL，即可以直接使用的图片URL。 2. **uniAPP集成html2canvas**： - 在uniAPP项目中，可以通过npm或yarn安装html2canvas库，然后在...
在本主题中，我们将深入探讨如何使用CSS3和Canvas来实现图片的模糊效果，特别是在Canvas上进行交互设计时如何应用模糊特效。 首先，CSS3已经提供了`filter`属性来实现元素的模糊效果。通过`filter: blur(x)`，我们...
在Android图形系统中，`Canvas`是用于在Bitmap或Surface上进行绘图操作的重要类。它提供了各种绘制路径、文本、矩形、圆形以及其他图形的方法。`save()`和`restore()`是`Canvas`中两个非常关键的方法，它们主要用于...
4. **回调函数**：提供onrendered回调函数，当Canvas渲染完成后会触发，开发者可以在此处进行后续操作，比如保存图片或进行图像处理。 三、使用方法 使用html2canvas非常简单，只需要在HTML文档中引入库文件，然后...
在这个场景中，我们关注的是如何利用Canvas来播放视频。这涉及到HTML5的Media API和Canvas API的结合使用，使得视频内容能够在Canvas元素上呈现。 首先，HTML5的`<video>`标签引入了在网页上嵌入视频的能力，它提供...
在Canvas中，每个子元素的位置是通过设置`Canvas.Left`、`Canvas.Right`、`Canvas.Top`和`Canvas.Bottom`属性来确定的，这些属性分别定义了元素相对于Canvas容器的左侧、右侧、顶部和底部的距离。例如，在以下代码...
1. 当在不支持Canvas的浏览器中加载包含FlashCanvas的页面时，JavaScript会检测到Canvas元素。 2. FlashCanvas会动态插入一个Flash对象来替代Canvas元素。 3. JavaScript API调用Canvas的绘图方法时，这些方法会被...
"canvas动态画出视图树"这个主题涉及到如何利用Canvas API来构建并动态更新一个可视化的视图层次结构，即视图树。视图树是用户界面的一种抽象表示，其中每个节点代表一个视图，节点之间的关系定义了它们的嵌套和布局...
如果需要在canvas上进行动态交互，比如点击canvas时检测是否与div重叠，或者让div跟随鼠标移动，我们需要用到JavaScript。例如，可以监听canvas的`mousedown`和`mousemove`事件，然后通过计算鼠标位置与div的位置...
"canvas可视化波形音频播放器(原创)"项目就是这样一个实现，它将音频数据与视觉元素相结合，提供了一种直观的音频播放体验。 首先，我们要理解Canvas的基本概念。Canvas是一个基于矢量图形的二维画布，通过...
EC-Canvas动态加载是其核心特性之一，允许开发者在运行时根据需要加载图表，减少初始页面的加载负担，提高用户体验。 在EC-Canvas中，动态加载主要涉及到以下几个知识点： 1. **异步加载**：在网页初始化时，可能...