<!DOCTYPE html>
<html>
<title>绘制线条</title>
<head>
<script type="text/javascript">
//画直线
function repeatLine(){
var c=document.getElementById("myCanvas");
//getContext("2d")返回一个CanvasRenderingContext2D对象
var cxt=c.getContext("2d");
//设置当前位置并开始一条新的子路径
cxt.moveTo(10,10);
//为当前的子路径添加一条直线线段
cxt.lineTo(150,50);
//为当前的子路径添加一条直线线段
//cxt.moveTo(90,10);
cxt.lineTo(10,50);
//沿着当前路径绘制或画一条直线
cxt.stroke();
}
//画圆
function repeatCycle(){
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.clearRect(0,0,200,100); //擦除了指定的矩形
cxt.fillStyle="#FF0000"; //设置或返回用于填充绘画的颜色、渐变或模式
cxt.beginPath(); //开始一个画布中的一条新路径（或者子路径的一个集合）
cxt.arc(100,50, 20,0,Math.PI*2,true); //
cxt.closePath(); //如果当前子路径是打开的，就关闭它
cxt.fill(); //使用指定颜色、渐变或模式来绘制或填充当前路径的内部。
}
//设置渐变色
function setChangeColor(){
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.clearRect(0,0,200,100); //擦除了指定的矩形
var grd=cxt.createLinearGradient(0,0,175,100); //创建线性的渐变对象CanvasGradient
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,100);
}
//将图片放在画布上 这个例子貌似不行
function addPicture(){
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.clearRect(0,0,200,100); //擦除了指定的矩形
var img=new Image();
img.src="ct_html5_canvas_image.gif";
//var img=document.getElementById("img1");
cxt.drawImage=(img,0,0,200,100);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<br />
<button onclick="repeatLine()">画线</button>
<button onclick="repeatCycle()">画圆</button>
<button onclick="setChangeColor()">设置渐变色</button>
<button onclick="addPicture()">设置图片</button>
<br />
<img id="img1" src="ct_html5_canvas_image.gif" width="204" height="104"></img>
</body>
<html>
@dianxinxinxiyuan.xiuyanxilu.pudongqu.shanghai
分享到：
相关推荐
`esp32-1.0.5.zip`是ESP32开发平台的固件或库文件的更新版本1.0.5，通常包含了编译器、开发工具链、驱动程序以及必要的API文档。 ESP32的硬件特性包括： 1. 双核32位LX6微处理器，工作频率可达240MHz，提供了强大的...
标题“arduino-1.0.5-windows”表明这是 Arduino IDE 的1.0.5版本，特别针对Windows操作系统进行了优化。描述中提到它是“最新”的，虽然现在可能有更高级的版本，但在当时发布时，1.0.5版确是Windows用户最新的选择...
通过使用特定的指令和标记（如`开头的标签），可以在Excel模板中嵌入逻辑和控制流，例如循环、条件判断等。这个核心库依赖于Apache POI，用于操作Excel文件。 ### 2. jxls-reader-1.0.5.jar 这个模块主要用于读取...
标签"cpdetector_1.0.5"进一步强调了这个工具的名称及其版本，这在组织和检索软件资源时非常有用。在软件开发中，版本管理对于追踪代码变化、确保兼容性和提供修复非常重要。 在Java世界里，".jar"文件是Java ...
VLC播放器1.0.5 安装版 提供给可以上CSDN但是不能上外网的朋友
vlc-1.0.5-intel.dmgvlc-1.0.5-intel 万能播放软件vlc-1.0.5-intel.dmgvlc-1.0.5-intel 万能播放软件vlc-1.0.5-intel.dmgvlc-1.0.5-intel 万能播放软件
《全面解析：一键安装安卓驱动_V1.0.5》 在移动设备的日常使用中，安卓驱动程序扮演着至关重要的角色。它们是操作系统与硬件之间的桥梁，确保手机或平板电脑能够正确识别并控制硬件组件，如摄像头、触摸屏、Wi-Fi...
Jakarta Taglibs Standard 1.0.5 是一套用于Java服务器页面（JSP）的标签库，它为开发人员提供了一种标准化的方式来创建动态网页内容。这个版本包含了两个核心组件：`jstl.jar` 和 `standard.jar`，它们在JSP开发中...
标签“工具”表明这可能是一款实用工具，旨在帮助用户完成特定任务，例如代码编辑、调试、自动化或其他开发工作流程的一部分。 在压缩包内文件名列表中提到的“plugins”，通常这是指一个包含多个插件或者插件相关...
在本案例中，我们关注的是"vlc-1.0.5.zip"，这是一个包含VLC 1.0.5版本的压缩包，适用于Chrome和IE浏览器的插件，尤其是对于IE的支持更加出色。 首先，让我们深入了解一下VLC。VLC是由VideoLAN项目开发的，它的全名...
PC中最强的J2ME虚拟机 2012元月又出更新了 1.0.5 [2012.01.02] Fixed several bug chinese language pack details of the changes
ezmorph-1.0.5.jar java
bcdautofix_v1.0.5是一款专用于修复多系统启动项和恢复原始系统开机画面的工具。在深入理解这个工具之前，我们首先要了解一些基础概念。 **启动配置数据（BCD）** BCD（Boot Configuration Data）是Windows Vista及...
Series则是一维的数据结构，类似于一列数据，每个元素都有唯一的标签（索引）。 **从其他工具过渡到Pandas** 无论你是从Excel、SQL数据库还是R语言背景转到Python，Pandas都能提供平滑的过渡体验。对于Excel用户，...
**avrdude-GUI 1.0.5：Arduino爱好者的编程神器** 在电子制作和嵌入式系统开发领域，Arduino平台因其易用性和丰富的硬件支持而广受欢迎。其中，`avrdude`是一个关键的软件工具，它允许用户通过编程器对Arduino微...
标签：scala、lang、modules、xml、中英对照文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准...
cloud-carousel.1.0.5.min.js
《p0sixspwn v1.0.5 for MAC：解锁iOS设备的神奇工具》 在iOS设备的越狱世界中，"p0sixspwn"是一个耳熟能详的名字，它是一个广受欢迎的越狱工具，特别是对于那些热衷于自定义和优化其Apple设备的用户而言。本文将...
snappy-1.0.5.tar.gz snappy-1.0.5.tar.gz snappy-1.0.5.tar.gz snappy-1.0.5.tar.gz snappy-1.0.5.tar.gz snappy-1.0.5.tar.gz snappy-1.0.5.tar.gz snappy-1.0.5.tar.gz snappy-1.0.5.tar.gz snappy-1.0.5.tar.gz ...
evasi0n7 mac 1.0.5，最新版for mac的，大神14年2月6日才发布的，支持全系列 iOS 7.0 - 7.0.5，以及iOS 7.1(b1-b4) 越狱。