转载自【http://www.656463.com/article/332】
Canvas标签定义，并获得坐标；画矩形，定义颜色，透明度；画直线，定义连接，节点；画圆，定义弧度，节点；画渐变色，定义节点渐变效果；读入一张图片
示例代码
<!DOCTYPE html>
<head>
<meta charset=gbk>
<title>PHP100 HTML5视频教程-canvas</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<canvas id="mycanvas" width="500" height="500"
onmousemove="mousexy(event)"></canvas>
<div id="ds"></div>
<script type="text/javascript">
var c=document.getElementById("mycanvas");
var p100=c.getContext("2d");
p100.fillStyle="#FF0000"; //定义颜色
p100.fillRect(0,0,300,300); //定义矩形的大小
p100.fillStyle="rgba(0,0,255,0.5)"; //定义颜色，支持透明
p100.fillRect(200,200,500,500); //定义矩形大小
//========线======
p100.moveTo(10,10); //起始位置
p100.lineTo(150,50); //终止位置
p100.lineTo(10,50); //如果没有再次设置起始位置将从结束位置开始画
p100.stroke(); //结束图形
//=======圆=======
p100.fillStyle="blue"; //定义演示
p100.beginPath(); //从新开始画，防止冲突重叠
//x坐标，y坐标，直径，Math.PI是圆周率
p100.arc(200,200,30,0,Math.PI*2,true);
p100.closePath(); //结束画布，防止冲突重叠
p100.fill(); //结束渲染
//======颜色渐变====
//颜色渐变的起始坐标和终点坐标
var grd=p100.createLinearGradient(100,100,175,50);
//0表示起点..0.1 0.2 ...1表示终点，配置颜色
grd.addColorStop(0,"yellow");
grd.addColorStop(1,"blue");
p100.fillStyle=grd; //生成的颜色块赋值给样式
p100.fillRect(100,100,175,50); //设置色块
//=======图形载入=====
var img=new Image()
img.src="logo.png"
p100.drawImage(img,220,30);
//监视鼠标
function mousexy(n){
x=n.clientX;
y=n.clientY;
$("#ds").html("坐标: x轴"+x+" y轴"+y);
}
</script>
</body>
</html>
分享到：
相关推荐
此外，QML的Canvas还支持路径、曲线、渐变色、图像处理等功能，可以用来创建复杂的图形和动画。通过学习和熟练掌握这些API，开发者可以打造出极具创意的QML应用程序。 在`draw-canvas`这个文件夹中，可能包含了示例...
HTML5 Canvas提供了丰富的绘图方法，如fillRect（填充矩形）、beginPath（开始路径）、moveTo（移动到）、lineTo（画线到）、arc（画圆弧）等。在这个表白动画中，爱心通常会用到arc方法来绘制心形的两个半圆和一条...
在HTML5中，`canvas`元素是一个强大的工具，它允许我们在网页上进行动态图形绘制，为Web开发者提供了前所未有的灵活性和交互性。本教程将深入探讨`canvas`元素的定义和使用，以及如何通过JavaScript来操作它，创建一...
它可以用来美化HTML5 Canvas，例如，通过CSS3选择器和样式规则改变canvas元素的边框、背景色，或者使用transform属性实现动画效果。CSS3的Flexbox或Grid布局也可以帮助更好地组织页面元素，使画布在不同屏幕尺寸下都...
"Canvas画图经典全面Demo"是一个深入学习和实践Canvas技术的资源集合，涵盖了Canvas绘图的多个重要方面。下面我们将详细探讨这些关键知识点。 1. **基础绘图操作** - **线条绘制**：使用`moveTo()`和`lineTo()`...
HTML5 Canvas 是一种在网页上动态绘制图形的API，提供了丰富的绘图功能。在这个教程的第四部分，我们将探讨未闭合路径的填充方法以及如何使用渐变色填充图形。 首先，填充图形是通过 `fill()` 方法实现的，这与 `...
HTML5 Canvas 是一个强大的网页图形绘制工具，它允许开发者通过JavaScript在网页上直接画图，创建动态、交互式的视觉效果。在这个"html5 canvas圆形转盘抽奖特效.zip"压缩包中，包含了一个利用Canvas实现的圆形转盘...
通过JavaScript，我们可以操纵Canvas的绘图上下文，进行各种画图操作，包括线条、形状、渐变等。在这个特效中，开发者可能使用了`beginPath()`、`moveTo()`、`lineTo()`、`stroke()`等方法来绘制波浪线，并使用`...
2. **绘图方法**：Canvas API提供了丰富的绘图方法，如`fillRect()`（填充矩形）、`strokeRect()`（描边矩形）、`beginPath()`（开始路径）、`moveTo()`（移动到）、`lineTo()`（画线到）、`arc()`（画圆弧）等，...
它可以用来画线、矩形、圆形、文字等基本图形，甚至可以进行更复杂的自定义图形绘制。Canvas提供了许多方法，如drawRect(), drawCircle(), drawText()等，这些方法接收不同的参数，如颜色、位置等，以完成各种绘制...
在Android开发中，Canvas是用于在屏幕上绘制图形的重要工具，它是`android.graphics.Canvas`类的实例。本篇文章将深入探讨如何使用Android Canvas进行图形绘制，包括基本概念、常用方法以及实际应用示例。 Canvas...
因此，要掌握Canvas画图，必须具备JavaScript基础知识。Canvas就像一块画布，提供了画笔和坐标系统，允许开发者通过编程方式绘制各种图形、图像和动画。 首先，创建一个Canvas元素是必要的。在HTML中，你可以用`...
HTML5 Canvas 是一个强大的网页图形绘制工具，它允许开发者通过JavaScript在网页上直接画图，创建复杂的图形、动画以及交互式元素。这个压缩包“基于html5 canvas绘制螺旋线条动画特效源码.zip”显然包含了一个使用...
这个在线画图及图片处理工具利用了Canvas的强大功能，让用户可以直接在浏览器中进行创作和编辑图片，实现了多种图像操作，如颜色反转、转灰度图、阴影效果以及横向和纵向渐变。 1. **Canvas基本概念** - Canvas是...
HTML5的`<canvas>`元素是一个可画图的区域，通过JavaScript的Canvas API，我们可以在这个区域内绘制各种图形，包括线条、形状、图像等。在这个案例中，开发者可能使用了`<canvas>`元素来定义动画的画布大小，并通过...
HTML5画板编辑写文字是一种基于Web的图形编辑技术，主要利用HTML5的Canvas元素，结合JavaScript、CSS和CSS3来实现。Canvas是HTML5的一个重要特性，它为网页提供了在浏览器内绘制图形的能力，而JavaScript则用于处理...
【C#自制画图板详解】 C# 是一种面向对象的编程语言，广泛应用于Windows桌面应用开发，包括创建用户界面和各种实用工具。本项目是一个简单的C#自制画图板，它提供了基本的绘画功能，让用户可以自由地进行图形创作。...
在浏览器上画图，最常用的库是HTML5的Canvas API。Canvas提供了一个二维绘图上下文，允许开发者通过JavaScript调用来绘制图形，包括线条、形状、图像以及复杂的动画。下面我们将深入探讨Canvas API的关键概念和常用...
Canvas API为开发者提供了丰富的绘图命令，例如画线、填充形状、绘制图像、文字以及动画等。在这款仿绘图软件中，用户可以利用这些功能进行绘画、设计或者编辑图像。以下是一些关于Canvas API和仿绘图软件的知识点：...