<!doctype html>
<html>
<head></head>
<body>
<canvas width="500" height="800" style="background:yellow" id="canvas">
您的浏览器当前版本不支持canvas标签
</canvas>
<script>
//获取画布DOM 还不可以操作
var canvas=document.getElementById('canvas');
//alert(canvas);
//设置绘图环境
var cxt=canvas.getContext('2d');
//alert(cxt);
//画一条线段。
//开启新路径
cxt.beginPath();
//设定画笔的宽度
cxt.lineWidth=10;
//设置画笔的颜色
cxt.strokeStyle="#ff9900";
//设定笔触的位置
cxt.moveTo(20,20);
//设置移动的方式
cxt.lineTo(100,20);
//画线
cxt.stroke();
//封闭路径
cxt.closePath();
//画一个空心圆形 凡是路径图形必须先开始路径，画完图之后必须结束路径
//开始新路径
cxt.beginPath();
//重新设置画笔
cxt.lineWidth=3;
cxt.strokeStyle="green";
cxt.arc(200,200,50,0,360,false);
cxt.stroke();
//封闭新路径
cxt.closePath();
//画一个实心圆形
cxt.beginPath();
//设置填充的颜色
cxt.fillStyle="rgb(255,0,0)";
cxt.arc(200,100,50,0,360,false);
cxt.fill();
cxt.stroke();
cxt.closePath();
//画一个矩形
cxt.beginPath();
cxt.rect(300,20,100,100);
cxt.stroke();
cxt.closePath();
//其他方法 建议使用此方式
cxt.strokeRect(300,150,100,100)
//实心矩形
cxt.beginPath();
cxt.rect(300,270,100,100);
cxt.fill();
cxt.closePath();
//其他方法 建议使用此方式
cxt.fillRect(300,390,100,100);
//设置文字
cxt.font="40px 宋体";//css font属性
cxt.fillText("无兄弟，不编程",20,300);
//将笔触设置为1像素
cxt.lineWidth=1;
cxt.strokeText("无兄弟，不编程",20,350);
//画图 把一幅图片画到画布中 注意webkit内核的浏览器 chrome和猎豹不支持
var img =new Image();
img.src="xiaomm.jpg";
cxt.drawImage(img,20,370,230,306);
//画一个三角形
cxt.beginPath();
//移动至开始点
cxt.moveTo(300,500);
cxt.lineTo(300,600);
cxt.lineTo(400,550);
cxt.closePath();//填充或者画路径需要先闭合路径再画
cxt.stroke();
//实心三角形
cxt.beginPath();
//移动至开始点
cxt.moveTo(300,600);
cxt.lineTo(300,700);
cxt.lineTo(400,650);
cxt.closePath();
cxt.fill();
//旋转图片 图片
//设置旋转环境
cxt.save();
//在异次元空间重置0,0点的位置
cxt.translate(20,20);
//图片/形状旋转
//设置旋转角度 参数是弧度 角度 0-360 弧度=角度*Math.PI/180
cxt.rotate(-30*Math.PI/180);
//旋转一个线段
cxt.lineWidth=10;
cxt.beginPath();
cxt.moveTo(0,0);
cxt.lineTo(20,100);
cxt.stroke();
cxt.closePath();
//将旋转之后的元素放回原画布
cxt.restore();
//过程不可颠倒 先设置00点在旋转角度，然后画图
//旋转小萌萌
cxt.save();
cxt.translate(20,370);
cxt.rotate(-10*Math.PI/180);
var img =new Image();
img.src="xiaomm.jpg";
cxt.drawImage(img,0,0,230,306);
cxt.restore();
</script>
</body>
</html>
相关推荐
这个“canvas简单实例详解”将带你深入了解Canvas的基本用法和常见操作，为你的网页开发添加丰富的视觉效果。 一、Canvas基本结构 Canvas元素在HTML中以`<canvas>`标签表示，可以通过ID来引用并进行JavaScript操作...
3. 动态渲染：使用canvas的`fillText()`方法绘制每个标签，根据权重调整字体大小，通过`rotate()`方法设置旋转角度，使用`translate()`方法改变绘制位置。 4. 避免重叠：为了防止标签相互覆盖，可以采用碰撞检测算法...
总的来说，这个项目展示了一个HTML5 Canvas和JavaScript结合的实例，通过动态的3D标签云，为网页添加了一种吸引人的视觉元素。学习并理解这个项目，开发者可以深入掌握Canvas的基本用法，以及如何利用JavaScript库来...
HTML5的Canvas标签是网页开发中的一个重要组成部分，它允许开发者在网页上绘制图形，实现动态效果和交互。在这个“html5 Canvas标签结合Jquery的时钟”项目中，我们将探讨如何利用这两个技术来创建一个实时更新的...
1. **Canvas标签**：HTML5中的Canvas是一个二维绘图环境，允许开发者通过JavaScript动态绘制图形。通过`<canvas>`标签，我们可以创建一个画布，然后使用JavaScript的Canvas API进行绘图。Chart.js正是利用了这个特性...
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 实例 如何通过 canvas 元素来显示一个红色的矩形： <canvas id=myCanvas></canvas> [removed] var canvas=document.getElementById('myCanvas'); var ctx=...
`canvas`标签本身就是一个二维绘图上下文，通过JavaScript的`CanvasRenderingContext2D`对象提供的方法，我们可以进行画线、填充形状、绘制图像等操作。 在“canvas小实例”中，我们可能会遇到以下核心概念和方法：...
本实例是关于如何利用JS和Canvas API创建一个功能丰富的在线画板应用。 首先，Canvas是一个HTML5的标签，它提供了一个2D渲染上下文，允许我们直接在网页上绘制图像。在这个"canvas画板实例"中，我们可以通过...
在博客中，`canvas.html`文件很可能是演示如何在canvas上使用外部字体的一个实例。通过查看这个文件，你可以看到实际的代码实现，包括如何处理字体加载和在canvas上渲染自定义字体的细节。 此外，标签“源码”和...
然后，使用`Chart.js`创建一个图表实例，传入`<canvas>`元素和配置对象： ```javascript new Chart(document.getElementById('myChart'), { type: 'bar', data: { labels: ['January', 'February', 'March', '...
HTML5的canvas标签是Web开发中的一个重要组成部分，它允许开发者在网页上绘制图形，实现动态图像和交互式可视化。然而，对于那些仍然使用Internet Explorer（IE）早期版本（主要是IE8及以下）的用户来说，浏览器本身...
在HTML5中，我们可以通过`<canvas>`标签来创建一个画布，并使用JavaScript的`CanvasRenderingContext2D`对象来绘制图形。 创建波形音频播放器的关键步骤如下： 1. **加载音频**：首先，我们需要使用HTML5的`...
这个“Canvas资料大全”包含了全面的实例和文档，旨在帮助你掌握这个当下流行的画图标签。 首先，Canvas的核心在于其JavaScript API，它提供了丰富的绘图方法，如`fillRect()`用于填充矩形，`strokeRect()`用于描边...
在这个实例中，我们将学习Canvas的基本用法，包括画布的设置、文本渲染以及用户事件处理。Canvas是HTML5中的一个强大特性，允许开发者在网页上动态绘制2D图形，为网页增添丰富的视觉效果和交互性。 首先，Canvas是...
首先，创建一个Canvas元素非常简单，只需在HTML中添加一个`<canvas>`标签，并设置其ID以便于在JavaScript中获取： ```html <canvas id="myCanvas" width="800" height="600"></canvas> ``` 接着，我们需要通过...
通过`<canvas>`标签在HTML文档中创建一个画布，然后通过JavaScript的`canvas.getContext('2d')`方法获取2D渲染上下文，这为我们提供了绘制图形的接口。 在Canvas上绘制图形的基本步骤包括： 1. 创建画布：`<canvas ...
在本实例中，我们探讨的是如何使用Canvas实现一个自由拼图的功能，这对于创建交互式的游戏或者图像编辑应用非常有用。 首先，我们需要理解Canvas的基本用法。在HTML中，`<canvas>`标签用于定义画布，它提供了一个二...
在这个实例中，我们将深入探讨如何利用Canvas来制作一个太阳、地球和月球三球联动的动画，这涉及到JavaScript编程以及Canvas API的使用。 首先，Canvas是一个二维绘图上下文，通过JavaScript来控制其行为。在HTML文...
"canvas-polygon"项目就是利用Canvas API来创建多边形的一个实例。本文将深入探讨如何使用Canvas API来实现多边形的绘制，并结合"canvas-polygon-master"压缩包中的代码进行解析。 首先，Canvas API是HTML5引入的一...
在JavaScript中，`<canvas>`元素是一个非常强大的工具，用于创建动态、交互式的矢量图形。...通过理解这个例子，开发者可以进一步学习如何用JavaScript进行图形绘制，从而构建更复杂的交互式应用。