未加星标

canvas知识总结

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

1.基础知识

canvas元素绘制图像的时候有两种方法,分别是

context.fill()//填充
context.stroke()//绘制边框

style:在进行图形绘制前,要设置好绘图的样式

context.fillStyle//填充的样式
context.strokeStyle//边框样式
context.lineWidth//图形边框宽度

context.arc(centerx圆心横左边,centery圆心纵坐标,radius半径,startingAngle起始弧度值,endingAngle结束弧度值,anticlockwise='false'顺时针默认false)

2.绘制非填充线段

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<link rel="stylesheet" href="styles/lianxi.css">
<script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<script src="scripts/lianxi.js"></script>
<!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<style type="text/css">
.canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
</style>
<script>
window.onload=function(){
function draw(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
canvas.width=300;
canvas.height=300;
ctx.beginPath(); //一个绘画开始
ctx.moveTo(50,50);//线段起点
ctx.lineTo(100,100);//终点1
ctx.lineTo(50,100);//终点2
ctx.lineTo(50,50);//终点3
ctx.lineWidth=5;//边框宽度
ctx.strokeStyle="red"; //边框样式
ctx.closePath(); //一个绘画结束
ctx.stroke();//绘制线段
}else{
alert('当前浏览器不支持,请更换浏览器');
}
}
draw();
}
</script>
<style tyrp="text/css">
canvas{ border: 1px solid black;margin: 0 auto;display: block;}
</style>
</head>
<body>
<canvas id="canvas">当前浏览器不支持,请更换浏览器</canvas>
</body>
</html>

3.绘制填充图形

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<link rel="stylesheet" href="styles/lianxi.css">
<script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<script src="scripts/lianxi.js"></script>
<!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<style type="text/css">
.canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
</style>
<script>
window.onload=function(){
function draw(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
canvas.width=300;
canvas.height=300;
ctx.beginPath(); //一个绘画开始
ctx.moveTo(50,50);//线段起点
ctx.lineTo(100,100);//终点1
ctx.lineTo(50,100);//终点2
ctx.lineTo(50,50);//终点3
ctx.fillStyle='red';
ctx.fill();
//边框添加
ctx.lineWidth=5;//边框宽度
ctx.strokeStyle="blue"; //边框样式
ctx.closePath(); //一个绘画结束
ctx.stroke();//绘制线段
}else{
alert('当前浏览器不支持,请更换浏览器');
}
}
draw();
}
</script>
<style tyrp="text/css">
canvas{ border: 1px solid black;margin: 0 auto;display: block;}
</style>
</head>
<body>
<canvas id="canvas">当前浏览器不支持,请更换浏览器</canvas>
</body>
</html>

4.绘制圆弧

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<link rel="stylesheet" href="styles/lianxi.css">
<script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<script src="scripts/lianxi.js"></script>
<!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<style type="text/css">
canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
</style>
<script>
window.onload=function(){
function draw(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
canvas.width=800;
canvas.height=800;
ctx.beginPath(); //开始一个新的绘画
ctx.lineWidth=5;//边框宽度
ctx.strokeStyle="red"; //边框样式
ctx.arc(100, 100, 30, 0, 1.5*Math.PI);
ctx.closePath(); //一个绘画结束,如果绘画不是封闭的,就封闭起来
ctx.stroke();//绘制线段
ctx.beginPath(); //开始一个新的绘画
ctx.lineWidth=5;//边框宽度
ctx.strokeStyle="red"; //边框样式
ctx.arc(200, 100, 30, 0, 2*Math.PI);
ctx.closePath(); //一个绘画结束,如果绘画不是封闭的,就封闭起来
ctx.stroke();//绘制线段
ctx.beginPath(); //开始一个新的绘画
ctx.lineWidth=5;//边框宽度
ctx.strokeStyle="red"; //边框样式
ctx.arc(300, 100, 30, 0, 0.5*Math.PI);
ctx.closePath(); //一个绘画结束,如果绘画不是封闭的,就封闭起来
ctx.stroke();//绘制线段
ctx.beginPath(); //开始一个新的绘画
ctx.lineWidth=5;//边框宽度
ctx.strokeStyle="red"; //一个绘画结束,如果绘画不是封闭的,就封闭起来
ctx.arc(400, 100, 30, 0, 0.5*Math.PI,true);//注意:0*PI,0.5*PI,1*PI,1。5*PI,2*PI所占据的位置是固定的
ctx.closePath(); //一个绘画结束
ctx.stroke();//绘制线段
ctx.beginPath(); //开始一个新的绘画
ctx.fillStyle="red"; //边框样式
ctx.arc(500, 100, 30, 0, 1.5*Math.PI);
ctx.closePath(); //一个绘画结束,如果绘画不是封闭的,就封闭起来
ctx.fill();//绘制填充
ctx.beginPath(); //开始一个新的绘画
ctx.lineWidth=5;//边框宽度
ctx.strokeStyle="red"; //边框样式
ctx.arc(600, 100, 30, 0, 1.5*Math.PI);
ctx.stroke();//绘制线段
}else{
alert('当前浏览器不支持,请更换浏览器');
}
}
draw();
}
</script>
</head>
<body>
<canvas id="canvas">当前浏览器不支持,请更换浏览器</canvas>
</body>
</html>

5.绘制矩形

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<link rel="stylesheet" href="styles/lianxi.css">
<script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<script src="scripts/lianxi.js"></script>
<!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<style type="text/css">
canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
</style>
<script>
window.onload=function(){
function draw(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
canvas.width=500;
canvas.height=500;
ctx.fillRect(25,25,100,100);//绘制一个填充的矩形
ctx.clearRect(45,45,60,60);//清除指定矩形区域,让清除部分完全透明
ctx.strokeRect(50,50,50,50); //绘制一个矩形的边框
}else{
alert('当前浏览器不支持,请更换浏览器');
}
}
draw();
}
</script>
</head>
<body>
<canvas id="canvas">当前浏览器不支持,请更换浏览器</canvas>
</body>
</html>

6.绘制文本

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<link rel="stylesheet" href="styles/lianxi.css">
<script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<script src="scripts/lianxi.js"></script>
<!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<style type="text/css">
canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
</style>
<script>
window.onload=function(){
function draw(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
canvas.width=500;
canvas.height=500;
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
}else{
alert('当前浏览器不支持,请更换浏览器');
}
}
draw();
}
</script>
</head>
<body>
<canvas id="canvas">当前浏览器不支持,请更换浏览器</canvas>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<link rel="stylesheet" href="styles/lianxi.css">
<script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<script src="scripts/lianxi.js"></script>
<!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<style type="text/css">
canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
</style>
<script>
window.onload=function(){
function draw(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
canvas.width=500;
canvas.height=500;
ctx.font = "48px serif";
ctx.strokeText("Hello world", 10, 50);
}else{
alert('当前浏览器不支持,请更换浏览器');
}
}
draw();
}
</script>
</head>
<body>
<canvas id="canvas">当前浏览器不支持,请更换浏览器</canvas>
</body>
</html>

7.图片操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css">
<link rel="stylesheet" href="styles/lianxi.css">
<script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
<script src="scripts/lianxi.js"></script>
<!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
<!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
<style type="text/css">
canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
</style>
<script>
window.onload=function(){
function draw(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
canvas.width=500;
canvas.height=500;
var img=new Image();
img.src='http://gzdl.cooco.net.cn/files/down/test/imggzdl/312/15812.jpg'
img.onload=function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
}else{
alert('当前浏览器不支持,请更换浏览器');
}
}
draw();
}
</script>
</head>
<body>
<canvas id="canvas">当前浏览器不支持,请更换浏览器</canvas>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 浏览器矩形
分页:12
转载请注明
本文标题:canvas知识总结
本站链接:http://www.codesec.net/view/529689.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(22)