您的位置：首页 > 其它

canvas基础绘画

2016-07-17 14:26 302 查看

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

</head>

<body>

<div style="height: 100px"></div>

<div style="text-align: center">

<canvas id="myCanvas" style="border: 1px solid gray;background-color: lightblue" width="600" height="400">

</canvas>

</div>



<div>

<input type="button" value="绘制文字" onclick="wenzi()"/>

<input type="button" value="绘制空心文字" onclick="wenzi2()"/>

<input type="button" value="绘制矩形" onclick="juxing()"/>

<input type="button" value="绘制实心矩形" onclick="juxing2()"/>

</div>

<div>

<input type="button" value="清空矩形区域" onclick="closees()"/>

<input type="button" value="画图片" onclick="tupian()"/>

<input type="button" value="画图片2" onclick="tupian2()"/>

</div>

<div>

<input type="button" value="画路径2" onclick="lujing2()"/>

<input type="button" value="画路径" onclick="lujing()"/>

<input type="button" value="画贝塞尔曲线路径" onclick="lujing3()"/>

<input type="button" value="画扇形" onclick="lujing4()"/>

</div>

<script>

var c=document.getElementById("myCanvas");

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

var img=document.getElementById("img1");

function lujing4(){

// 画扇形，参数共计6个，至少需要5个

// 1---圆心坐标X 2----圆心坐标Y

// 3---半径长度，单位像素

// 4----开始角度，5----结束角度

// 6----是否为顺时针绘制，默认值false，为顺时针

cxt.arc(200,200,100,0, Math.PI);

cxt.stroke();

}

function lujing3(){

cxt.moveTo(20,20);

cxt.quadraticCurveTo(10,50,100,50);

cxt.stroke();

}

function lujing2(){

// 有了beginPath和closePath之后，绘制的路径线条最后会自动闭合（从结束的坐标绘制一条路径到开始的坐标点）

// beginPath和closePath必须成对出现

cxt.beginPath();

cxt.moveTo(100,100);

cxt.lineTo(150,150);

cxt.lineTo(50,200);

cxt.closePath();

cxt.stroke();

}

function lujing(){

// moveTo 将画笔的指定到界面的某一个坐标点

cxt.moveTo(100,350);

cxt.moveTo(350,350);

// lineTo 从上一个坐标点跳到下一个坐标点并绘制2点之间的路径

// 如果没有初始化坐标点，那么lineTo等同于moveTo

cxt.lineTo(50,50);

cxt.lineTo(40,40);

// stroke是将内存中的运行结果真正的绘制到界面

cxt.stroke();

}

function tupian2(){

cxt.drawImage(img,0,0,100,200,300,100,200,300)

}

function tupian(){

cxt.drawImage(img,0,0,200,200)

}

function closees(){

cxt.clearRect()

}

function juxing2(){

cxt.fillRect(210,100,210,100);

cxt.fillStyle="orangered";

cxt.fillRect(205,95,210,100);

}

function juxing(){

cxt.strokeRect(210,100,210,100)

}

function wenzi2(){

cxt.font='36px 楷体';

cxt.fillStyle="blue";

cxt.strokeText("PG32--唐漆",40,340)

}

function wenzi(){

//fillText函数，功能是绘制文字内容在画布中

// 参数总计有4个 1----将要绘制出了的文字

// 2------绘制的X坐标点 3------绘制的Y坐标点

// 4------文字内容显示的最大宽度，避免文字溢出或者叫超出可以控制的范围

// 坐标点的位置默认在第一个文字的左下角1

cxt.font='36px 楷体';

cxt.fillStyle="blue";

cxt.fillText("PG32--唐漆",40,80)

}

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航