1、定创建canvas画布
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border: 1px solid #c3c3c3;">
您的浏览器不支持canvas，请升级浏览器！
</canvas>
</body>
<script>
window.onload=function(){
//canvas是采用JavaScript来获取canvas元素
var canvas =document.getElementById("canvas");
//然后，创建 context 对象：
// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var context=canvas.getContext("2d);//canvas的绘图上下文环境
}
</script>
</html>
2、绘制直线
canvas绘图是基于状态的，然后在调用方法来绘图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border: 1px solid #c3c3c3;">
您的浏览器不支持canvas，请升级浏览器！
</canvas>
<script>
window.onload=function(){
//canvas是采用JavaScript来获取canvas元素
var canvas =document.getElementById("canvas");
////canvas的绘图上下文环境
// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var context=canvas.getContext("2d");
//绘制直线，设置绘图的状态
context.moveTo(100,100);//开始坐标
context.lineTo(600,600);//结束坐标
context.strokeStyle="aqua";
//具体绘制
context.stroke();
}
</script>
</body>
</html>
效果图：
绘制直线.jpg
3、绘制三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
background-color: black;
margin: 10 auto;
padding: 0 auto;
}
#canvas{
margin: 200px;
}
</style>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border: 1px solid #c3c3c3;">
您的浏览器不支持canvas，请升级浏览器！
</canvas>
<script>
window.onload=function(){
//canvas是采用JavaScript来获取canvas元素
var canvas =document.getElementById("canvas");
////canvas的绘图上下文环境
// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var context=canvas.getContext("2d");
//绘制直线，设置绘图的状态
//绘图的原点是根据cancas边框的左上角
context.moveTo(100,100);//开始坐标
context.lineTo(600,600);//第二个坐标点
context.lineTo(100,600);//第三个坐标点
context.lineTo(100,100);//回到开始坐标
context.strokeStyle="aqua";
//具体绘制
context.stroke();
}
</script>
</body>
</html>
三角形.jpg
4、创建多个图形（context--绘制路径）
路径
context.beginPath() context.closePath()
画圆并不单单是直接用arc，它还用到beginPath()方法，和closePath()方法，如果没有重新beginPath那么前面的路劲会保留。
a、系统默认在绘制第一个路径的开始点为beginPath。
b、如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制。
c、每次调用context.fill()的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
background-color: black;
margin: 10 auto;
padding: 0 auto;
}
#canvas{
margin: 200px;
}
</style>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border: 1px solid #c3c3c3;">
您的浏览器不支持canvas，请升级浏览器！
</canvas>
<script>
window.onload=function(){
//canvas是采用JavaScript来获取canvas元素
var canvas =document.getElementById("canvas");
////canvas的绘图上下文环境
// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var context=canvas.getContext("2d");
//1、绘制三角形
//设置绘图的状态
//绘图的原点是根据cancas边框的左上角
context.beginPath();//重新指定绘制
context.moveTo(100,100);//开始坐标
context.lineTo(600,600);//第二个坐标点
context.lineTo(100,600);//第三个坐标点
context.lineTo(100,100);//回到开始坐标
context.closePath();//结束绘制路径
context.strokeStyle="aqua";//定义线条颜色
context.lineWidth=5;//线条粗细度
//具体绘制三角形
context.stroke();
// 绘制直线
context.beginPath();//重新指定绘制路径
context.moveTo(300,200);
context.lineTo(600,500);
context.closePath();//结束绘制路径
context.lineWidth=10;
context.fillStyle="chartreuse";//绘制填充颜色
context.stroke();
}
</script>
</body>
</html>
绘制多个图形.jpg
5、创建七巧板（路径绘制）
beginPath():新建路径
closePath();闭合路径
fill()：填充图形
stroke()：绘制图形轮廓
moveTo(x,y)：绘制开始路径点
lineTo(x,y):绘制结束路径点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
background-color: black;
margin: 10 auto;
padding: 0 auto;
}
#canvas{
margin: 200px;
}
</style>
</head>
<body>
<canvas id="canvas" width="1024" height="868" style="border: 1px solid #c3c3c3;">
您的浏览器不支持canvas，请升级浏览器！
</canvas>
<script>
window.onload=function(){
//canvas是采用JavaScript来获取canvas元素
var canvas =document.getElementById("canvas");
////canvas的绘图上下文环境
// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var context=canvas.getContext("2d");
// 定义一个坐标点json对象数组，里面存储，各个坐标点
var tangram=[
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a54c09"},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ccc"},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}];
//遍历json数组
for(var i=0;i<tangram.length;i++)
{
dram(tangram[i],context);
}
function dram(tangram,context){
context.beginPath();
context.moveTo(tangram.p[0].x,tangram.p[0].y);//定义开始绘制路径
for(var j=1;j<tangram.p.length;j++){
context.lineTo(tangram.p[j].x,tangram.p[j].y);
}
//它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭或者只有一个点，
//它会什么都不做。这一步不是必须的。
context.closePath();
context.strokeStyle="black";//绘制线段的颜色
context.lineWidth=5;//绘制线段的粗细
context.fillStyle=tangram.color;//绘制填充颜色
context.stroke()//绘制边框
context.fill();//绘制填充图形
}
}
</script>
</body>
</html>
效果图：
七巧板.png
6、绘制圆弧
方法：arc（x，y，radius，startAngle,endAngle,anticlockwise）
x，y：圆心位置
radius：半径
startAnale：开始绘制圆弧点
endAngle:结束绘制圆弧点
anticlockwise：方向（布尔值，默认为顺时针方向：true:逆时针；false:顺时针）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
background-color: black;
margin: 10 auto;
padding: 0 auto;
}
#canvas{
margin: 200px;
}
</style>
</head>
<body>
<canvas id="canvas" width="1400" height="1200" style="border: 1px solid #c3c3c3;">
您的浏览器不支持canvas，请升级浏览器！
</canvas>
<script>
window.onload=function(){
//canvas是采用JavaScript来获取canvas元素
var canvas =document.getElementById("canvas");
////canvas的绘图上下文环境
// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var context=canvas.getContext("2d");
//1、绘制半圆，并填充颜色
context.beginPath();//开始绘制
context.strokeStyle="#caff67";
context.arc(100,100,50,0,Math.PI,false);
context.closePath();
context.fillStyle="#caff67";
context.fill();
context.stroke();
//2、绘制多段圆弧,未使用closePath()
var i=10;
for(var j=0;j<i;j++){
context.beginPath();
context.strokeStyle="aqua";
context.arc(200+120*j,200,50,0,2*Math.PI*(j+1)/10,false);
context.stroke();
}
//3、绘制多段圆弧,使用closePath()
//使用closePath()，把开始路径点和结束路径点，以线段连接起来
var k=10;
for(var j=0;j<k;j++){
context.beginPath();
context.strokeStyle="aqua";
context.arc(200+120*j,500,50,0,2*Math.PI*(j+1)/10,false);
context.closePath();
context.stroke();
}
}
</script>
</body>
</html>
效果图：
圆弧.png
网友评论