<!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
分享到:
相关推荐
pandas1.0.5.pdf pandas1.0.5.pdf pandas1.0.5.pdf pandas1.0.5.pdf
jodeplugin_1.0.5.zip
jxls1.0.5报表工具
VLC播放器1.0.5 安装版 提供给可以上CSDN但是不能上外网的朋友
esp32-1.0.5.zip
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 万能播放软件
ezmorph-1.0.5.jar java
cpdetector_1.0.5.jar,
PC中最强的J2ME虚拟机 2012元月又出更新了 1.0.5 [2012.01.02] Fixed several bug chinese language pack details of the changes
bcdautofix_v1.0.5,修复多系统启动项,修复原始系统开机画面等
标签:scala、lang、modules、xml、中英对照文档、jar包、java; 使用方法:解压翻译后的API文档,用浏览器打开“index.html”文件,即可纵览文档内容。 人性化翻译,文档中的代码和结构保持不变,注释和说明精准...
BCDautofix v1.0.5,修复引导
cloud-carousel.1.0.5.min.js
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 ...
标签:aspectjrt-1.0.5.jar.zip,aspectjrt,1.0.5,jar.zip包下载,依赖包
一款浏览器插件,兼容低版本谷歌,火狐,和IE浏览,主要对IE的支持较好,版本较低,仅供测试和学习,试用于IE浏览器的测试
evasi0n7 mac 1.0.5,最新版for mac的,大神14年2月6日才发布的,支持全系列 iOS 7.0 - 7.0.5,以及iOS 7.1(b1-b4) 越狱。
peersim 1.0.5 application code
ChiaSetup-1.0.5 chia官网昨天刚出的最新版本
一键安装安卓驱动_V1.0.5.zip