html5——canvas绘图 - html5

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>
</title></head>
<body>
<form method="post" action="./WebForm1.aspx_files/WebForm1.aspx.htm" id="form1">
<div style="height: 77px; margin-left: 40px">
<input name="TextBox1" type="text" id="TextBox1" style="height:26px;width:444px;">
<input id="btn_search" style="height: 30px;width:80px" type="button" value="搜索"></div>
</form>
<div>
<p style="font:14px 微软雅黑;color:#f000ff">Canvas操作测试</p>
<img id="img1" style="display:none" src="http://www.runoob.com/images/img_the_scream.jpg" width="100" height="300"/>
</div>
<div>
<button id="btn1" style="height:26px;width:82px;" onclick="onBtn1()">点击画线</button>
<button id="btn2" style="height:26px;width:82px;" onclick="onBtn2()">填充</button>
<button id="btn2" style="height:26px;width:82px;" onclick="onBtn3()">文字</button>
<button id="btn2" style="height:26px;width:82px;" onclick="onBtn4()">圆</button>
<button id="btn2" style="height:26px;width:82px;" onclick="onBtn5()">绘图</button>
</div>
<div>
<p style="font:14px;color:#f000ff">Canvas显示:</p>
</div>
<div>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;">
</div>
</canvas>
<script>
function onBtn1()
{
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 2;
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();
}
function onBtn2()
{
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#ff00f0"; //设置填充颜色
ctx.fillRect(0, 0, 20, 20); //填充区域
}
function onBtn3()
{
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px 微软雅黑"; //设置绘制字体
ctx.fillStyle = "#ff0000"; //设置绘制文字的颜色
ctx.fillText("Hello world!", 20, 60);
//绘制空心字
ctx.strokeText("Hello world!", 40, 60);
}
function onBtn4()
{
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//绘制圆形
ctx.beginPath();
ctx.lineWidth = "1px";
ctx.arc(50, 50, 20, 0, 2 * Math.PI);
ctx.stroke(); //绘制线条
//填充圆形
ctx.fillStyle = "#00a000";
ctx.beginPath();
ctx.arc(100, 50, 20, 0, 2 * Math.PI);
ctx.fill(); //填充线条内部区域
}
function onBtn5()
{
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//绘制图片的两种方式，无缩放
//1、加载DOM中的img标签
var img = document.getElementById("img1");
ctx.drawImage(img, 0, 100);
//2、加载已知链接的图片
var img1 = new Image(100, 300);
img1.src = "http://avatar.csdn.net/6/6/B/1_mfcing.jpg";
ctx.drawImage(img1, img.naturalWidth + 10, 100); //naturalWidth图片的原始尺寸
//缩放绘制
ctx.drawImage(img, 0, 0, 30, 90); //缩放图片尺寸到 30*90
//只绘制部分区域
ctx.drawImage(img, 0, 0, 100, 100, 60, 0, 90, 90); //绘制图片的（0，0，100，100）这个区域到（60，0，150，150）这个区域
}
</script>
</body></html>

本文来自于：http://www.yoyo88.cn/study/html5/69.html

在线演示 (4)

上一篇 html5——拖拽 / 拖拽排序

下一篇 html5——多图上传