<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
<style>
canvas{
background:#ccc;
}
</style>
<script>
window.οnlοad=function(){
var canvas = document.getElementById("canvas");
var cobj = canvas.getContext("2d");
/*属性*/
cobj.lineWidth=10;
//cobj.lineCap='round';//设置或返回线条的结束端点的样式
//设置或返回两条线相交时，所创建的拐角类型。miter默认，创建尖角。bevel创建斜角，round创建圆角。
//cobj.lineJoin='round';
cobj.miterLimit=5;
cobj.moveTo(100,100);
cobj.lineTo(200,200);
cobj.lineTo(200,100);
cobj.stroke();
/*画直线*/
/*
cobj.moveTo(0,0);
cobj.lineTo(100,100);
cobj.stroke();
cobj.beginPath();
cobj.lineTo(200,150);
cobj.lineTo(300,50);
cobj.lineTo(400,150);
cobj.closePath();
cobj.stroke();
*/
/*画矩形*/
/*
cobj.strokeStyle="#f00";
cobj.rect(0,0,100,100);
cobj.stroke();
cobj.fill();
*/
/*简单的画图功能*/
/*
canvas.οnmοusedοwn=function(e){
var mx = e.layerX;
var my = e.layerY;
cobj.moveTo(mx,my);
canvas.οnmοusemοve=function(e){
var endx = e.layerX;
var endy = e.layerY;
cobj.lineTo(endx,endy);
cobj.stroke();
}
canvas.οnmοuseup=function(e){
canvas.οnmοusemοve=null;
canvas.οnmοuseup=null;
}
}
*/
//drawRect(100,100,200,200);
//drawCircle(150,150,50);
/*画矩形*/
function drawRect(x,y,w,h){
cobj.beginPath();
cobj.moveTo(x,y);
cobj.lineTo(x+w,y);
cobj.lineTo(x+w,y+h);
cobj.lineTo(x,y+h);
cobj.closePath();
cobj.stroke();
}
/*画圆形*/
function drawCircle(x,y,r){
cobj.beginPath();
for(var i=0;i<360;i++){
cobj.lineTo(x+r*Math.cos(i*Math.PI/180),y+r*Math.sin(i*Math.PI/180));
cobj.stroke();
}
}
}
</script>
</head>
<body>
<canvas width="400px" height="400px" id="canvas">
请您升级浏览器
</canvas>
</body>
</html>
878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
