Html5 画图-白红宇

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

</head>

<body>

</canvas>

//1.得到画布

var canvas1 = document.getElementById_x("can1");

//2.得到画笔

var cxt = canvas1.getContext("2d");

//3.画直线

//moveTo函数就是设置点的位置

cxt.moveTo(20, 20);

//设置第二个点的位置

cxt.lineTo(20, 90);

//画出直线

cxt.stroke();

//画出一个填充三角形

//开始新的路径

cxt.beginPath();

cxt.moveTo(40, 20);

cxt.lineTo(40, 90);

cxt.lineTo(80, 90);

//闭合路径，把最后这个点和第一个点moveTo()闭合

cxt.closePath();

//填充矩形

//cxt.fill();

cxt.stroke();

//空心矩形

cxt.strokeRect(100, 20, 70, 70);

//填充矩形

//如果希望改变填充的颜色，刚修改画笔的fillStyle

cxt.fillStyle = "#00FF00";

cxt.fillRect(190,20,50,50);

//画出圆形 car

//六个参数:arc(x,y,radius,startAngle,endAngle,counterclockwise)

cxt.beginPath();

cxt.arc(270, 40, 20, 0, 360, true);//(x,y,r,开始角度，结束角度，是否顺时针)

cxt.closePath();

//填充空心的圆形

cxt.stroke();

//画笔换色

cxt.fillStyle = "FF0000";

cxt.beginPath();

cxt.arc(320, 40, 20, 0, 360, true); //(x,y,r,开始角度，结束角度，是否顺时针)

cxt.closePath();

//填充实心的圆形

cxt.fill();

//画图片

//1.创建image对象

var img1 = new Image();

//2.指定是哪个图片

img1.src = "萨摩耶.jpg";

//注意要加这么一个方法，先加载完成后再画图

img1.onload = function () {

cxt.drawImage(img1, 20, 100, 200, 150);

}

//在画布上写字

var text = "Hello，亲爱哒！";

//设置字体的大小

cxt.fillStyle = "#0000FF";

cxt.font = "30px 华文彩云";

cxt.fillText(text,230,200);

</script>

</body>

</html>

本文转自蓬莱仙羽51CTO博客，原文链接：http://blog.51cto.com/dingxiaowei/1366604，如需转载请自行联系原作者