<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
background: red;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cobj = canvas.getContext('2d');//获取绘图环境
cobj.strokeStyle = "#aa1";
cobj.rect(0,0,100,100);//该步只是把信息放入内存当中
cobj.stroke();//通知浏览器绘制出图形
}
</script>
</head>
<body>
<canvas id="canvas" width=500 height=500>
请你升级你的浏览器!
</canvas>
</body>
<head>
<meta charset="utf-8">
<style>
canvas{
background: red;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cobj = canvas.getContext('2d');//获取绘图环境
cobj.strokeStyle = "#aa1";
cobj.rect(0,0,100,100);//该步只是把信息放入内存当中
cobj.stroke();//通知浏览器绘制出图形
}
</script>
</head>
<body>
<canvas id="canvas" width=500 height=500>
请你升级你的浏览器!
</canvas>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
background: red;
}
</style>
</head>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cobj = canvas.getContext('2d');//获取绘图环境
// cobj.moveTo(0,0);
// cobj.lineTo(100,100);//该步只是把信息放入内存当中
// cobj.stroke();//通知浏览器绘制出图形
// cobj.beginPath();//新开一块内存来存放第二段直线,使新的直线不会与原来的直线相连
// cobj.lineTo(0,200);//该步只是把信息放入内存当中
// cobj.lineTo(100,150);//该步只是把信息放入内存当中
// cobj.lineTo(150,270);//该步只是把信息放入内存当中
// cobj.closePath();//与beginPath是成对出现的,具有头尾相连的功能,使这里的两条线成三角形
// cobj.stroke();//通知浏览器绘制出图形
//鼠标按下拖动画出图线
canvas.onmousedown = function(e){
var startX = e.layerX;
var startY = e.layerY;
cobj.moveTo(startX, startY);
canvas.onmousemove = function(e){
var endX = e.layerX;
var endY = e.layerY;
cobj.lineTo(endX,endY);
cobj.stroke();
}
canvas.onmouseup = function(){
canvas.onmousemove = null;
canvas.onkeyup = null;
}
}
}
</script>
<body>
<canvas id="canvas" width=300 height=300>
</canvas>
</body>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
background: red;
}
</style>
</head>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cobj = canvas.getContext('2d');//获取绘图环境
// cobj.moveTo(0,0);
// cobj.lineTo(100,100);//该步只是把信息放入内存当中
// cobj.stroke();//通知浏览器绘制出图形
// cobj.beginPath();//新开一块内存来存放第二段直线,使新的直线不会与原来的直线相连
// cobj.lineTo(0,200);//该步只是把信息放入内存当中
// cobj.lineTo(100,150);//该步只是把信息放入内存当中
// cobj.lineTo(150,270);//该步只是把信息放入内存当中
// cobj.closePath();//与beginPath是成对出现的,具有头尾相连的功能,使这里的两条线成三角形
// cobj.stroke();//通知浏览器绘制出图形
//鼠标按下拖动画出图线
canvas.onmousedown = function(e){
var startX = e.layerX;
var startY = e.layerY;
cobj.moveTo(startX, startY);
canvas.onmousemove = function(e){
var endX = e.layerX;
var endY = e.layerY;
cobj.lineTo(endX,endY);
cobj.stroke();
}
canvas.onmouseup = function(){
canvas.onmousemove = null;
canvas.onkeyup = null;
}
}
}
</script>
<body>
<canvas id="canvas" width=300 height=300>
</canvas>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
background: red;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cobj = canvas.getContext('2d');//获取绘图环境 width
drawRect(2,3,44,55);
drawCircle(120,250,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();
}
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
background: red;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cobj = canvas.getContext('2d');//获取绘图环境 width
drawRect(2,3,44,55);
drawCircle(120,250,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=1;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 id="canvas" width=300 height=300>
</canvas>
</body>
cobj.beginPath();
for(var i=1;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 id="canvas" width=300 height=300>
</canvas>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
background: red;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cobj = canvas.getContext('2d');//获取绘图环境 width
drawRect(2,3,44,55);
drawCircle(120,250,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=1;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 id="canvas" width=300 height=300>
</canvas>
</body>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
background: red;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cobj = canvas.getContext('2d');//获取绘图环境 width
drawRect(2,3,44,55);
drawCircle(120,250,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=1;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 id="canvas" width=300 height=300>
</canvas>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
background: red;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cobj = canvas.getContext('2d');//获取绘图环境
cobj.lineWidth = '10';
cobj.lineCap = 'round';
cobj.moveTo(10,10);
cobj.lineTo(100,100);//该步只是把信息放入内存当中
cobj.stroke();//通知浏览器绘制出图形
}
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300>
</canvas>
</body>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
background: red;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cobj = canvas.getContext('2d');//获取绘图环境
cobj.lineWidth = '10';
cobj.lineCap = 'round';
cobj.moveTo(10,10);
cobj.lineTo(100,100);//该步只是把信息放入内存当中
cobj.stroke();//通知浏览器绘制出图形
}
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300>
</canvas>
</body>
</html>
二次贝塞尔曲线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
background: red;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cobj = canvas.getContext('2d');//获取绘图环境
// cobj.moveTo(100,100);
// // cobj.quadraticCurveTo(130,200,350,350);//二次贝塞尔曲线
// cobj.bezierCurveTo(130,200,230,150,350,350);//三次贝塞尔曲线
// cobj.stroke();//通知浏览器绘制出图形
//鼠标点击,然后再其他地方放开,就会绘制一条直线,然后移动鼠标,就可以绘制贝塞尔曲线
canvas.onmousedown = function(e){
var startX = e.layerX;
var startY = e.layerY;
canvas.onmouseup = function(e){
var endX = e.layerX;
var endY = e.layerY;
canvas.onmousemove = function(e){
cobj.clearRect(0,0,400,400);
var conX = e.layerX;
var conY = e.layerY;
cobj.beginPath();
cobj.moveTo(startX, startY);
cobj.quadraticCurveTo(conX,conY,endX,endY);
// cobj.closePath();
cobj.stroke();
}
}
}
}
</script>
</head>
<body>
<canvas id="canvas" width=400 height=400>
</canvas>
</body>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
background: red;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cobj = canvas.getContext('2d');//获取绘图环境
// cobj.moveTo(100,100);
// // cobj.quadraticCurveTo(130,200,350,350);//二次贝塞尔曲线
// cobj.bezierCurveTo(130,200,230,150,350,350);//三次贝塞尔曲线
// cobj.stroke();//通知浏览器绘制出图形
//鼠标点击,然后再其他地方放开,就会绘制一条直线,然后移动鼠标,就可以绘制贝塞尔曲线
canvas.onmousedown = function(e){
var startX = e.layerX;
var startY = e.layerY;
canvas.onmouseup = function(e){
var endX = e.layerX;
var endY = e.layerY;
canvas.onmousemove = function(e){
cobj.clearRect(0,0,400,400);
var conX = e.layerX;
var conY = e.layerY;
cobj.beginPath();
cobj.moveTo(startX, startY);
cobj.quadraticCurveTo(conX,conY,endX,endY);
// cobj.closePath();
cobj.stroke();
}
}
}
}
</script>
</head>
<body>
<canvas id="canvas" width=400 height=400>
</canvas>
</body>
</html>
鼠标点击下,圆会伸缩变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
background: red;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cobj = canvas.getContext('2d');//获取绘图环境
var angle = 0;
cobj.beginPath();
cobj.arc(200,200,50,0,2*Math.PI);//画圆
cobj.stroke();
cobj.beginPath();
cobj.arc(180,180,10,0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(180,180,1,0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(220,180,10,0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(220,180,1,0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(200,200,30,0,Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(195,200,3,0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(205,200,3,0,2*Math.PI);
cobj.stroke();
canvas.onclick = function(){
setInterval(function(){
cobj.clearRect(0, 0, 400, 400);
cobj.beginPath();
angle += 0.2;
cobj.arc(200,200,50+30*Math.sin(angle),0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(180,180,10+30*Math.sin(angle),0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(180,180,1,0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(220,180,10+30*Math.sin(angle),0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(220,180,1,0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(200,200,30+30*Math.sin(angle),0,Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(195,200,3+30*Math.sin(angle),0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(205,200,3+30*Math.sin(angle),0,2*Math.PI);
cobj.stroke();
},100);
}
}
</script>
</head>
<body>
<canvas id="canvas" width=400 height=400>
</canvas>
</body>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
background: red;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cobj = canvas.getContext('2d');//获取绘图环境
var angle = 0;
cobj.beginPath();
cobj.arc(200,200,50,0,2*Math.PI);//画圆
cobj.stroke();
cobj.beginPath();
cobj.arc(180,180,10,0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(180,180,1,0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(220,180,10,0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(220,180,1,0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(200,200,30,0,Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(195,200,3,0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(205,200,3,0,2*Math.PI);
cobj.stroke();
canvas.onclick = function(){
setInterval(function(){
cobj.clearRect(0, 0, 400, 400);
cobj.beginPath();
angle += 0.2;
cobj.arc(200,200,50+30*Math.sin(angle),0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(180,180,10+30*Math.sin(angle),0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(180,180,1,0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(220,180,10+30*Math.sin(angle),0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(220,180,1,0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(200,200,30+30*Math.sin(angle),0,Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(195,200,3+30*Math.sin(angle),0,2*Math.PI);
cobj.stroke();
cobj.beginPath();
cobj.arc(205,200,3+30*Math.sin(angle),0,2*Math.PI);
cobj.stroke();
},100);
}
}
</script>
</head>
<body>
<canvas id="canvas" width=400 height=400>
</canvas>
</body>
</html>
指哪打哪
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
background: red;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cobj = canvas.getContext('2d');//获取绘图环境
cobj.moveTo(250,400);
cobj.strokeStyle = 'teal';
cobj.lineWidth = '5';
cobj.lineTo(250,360);
cobj.stroke();//通知浏览器绘制出图形
canvas.onmousemove = function(e){
var mouseX = e.layerX;
var mouseY = e.layerY;
var startX = 250;
var startY = 400;
var angle = Math.atan2((mouseY-startY),(mouseX-startX));
cobj.clearRect(0, 0, 500, 500);
cobj.beginPath();
cobj.moveTo(startX, startY);
cobj.lineTo(startX+40*Math.cos(angle),startY+40*Math.sin(angle));
cobj.stroke();
}
}
</script>
</head>
<body>
<canvas id="canvas" width=500 height=500>
</canvas>
</body>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
canvas{
background: red;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var cobj = canvas.getContext('2d');//获取绘图环境
cobj.moveTo(250,400);
cobj.strokeStyle = 'teal';
cobj.lineWidth = '5';
cobj.lineTo(250,360);
cobj.stroke();//通知浏览器绘制出图形
canvas.onmousemove = function(e){
var mouseX = e.layerX;
var mouseY = e.layerY;
var startX = 250;
var startY = 400;
var angle = Math.atan2((mouseY-startY),(mouseX-startX));
cobj.clearRect(0, 0, 500, 500);
cobj.beginPath();
cobj.moveTo(startX, startY);
cobj.lineTo(startX+40*Math.cos(angle),startY+40*Math.sin(angle));
cobj.stroke();
}
}
</script>
</head>
<body>
<canvas id="canvas" width=500 height=500>
</canvas>
</body>
</html>