1.0.5 canvas画布标签

最新推荐文章于 2024-11-07 17:40:13 发布

听雨1

最新推荐文章于 2024-11-07 17:40:13 发布

阅读量122

点赞数

分类专栏： HTML5 文章标签： html5 canvas 画布

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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 οnclick="repeatLine()">画线</button>
<button οnclick="repeatCycle()">画圆</button>
<button οnclick="setChangeColor()">设置渐变色</button>
<button οnclick="addPicture()">设置图片</button>
<br />
<img id="img1" src="ct_html5_canvas_image.gif" width="204" height="104"></img>
</body>
<html>

@dianxinxinxiyuan.xiuyanxilu.pudongqu.shanghai