Canvas标签绘制图形
2017-11-03 本文已影响29人
akubaba
内容整理自网上！
CanvasRenderingContext2D参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/fillRect
一、绘制图
代码：
<script>
var CANVAS_WIDTH=500;
var CANVAS_HEIGHT=500;
var canvas,context;
window.onload=function () {
createCanvas();
drawRect();
}
function createCanvas() {
document.body.innerHTML="<canvas id='canvas' width='"+CANVAS_WIDTH+"' height='"+CANVAS_HEIGHT+"'></canvas>";
canvas=document.getElementById('canvas');
context=canvas.getContext('2d');
}
function drawRect() {
//填充颜色
context.fillStyle='#4169e1';
//context.rotate(45);//角度
//context.translate(200,200);//移动
//context.scale(2,0.5);//缩放
//绘制填充矩形，矩形的起点在 (x, y) 位置，矩形的尺寸是 width 和 height
context.fillRect(0,0,100,100);
}
</script>
二、绘制图片
代码：
function drawImage() {
var img=new Image();
img.onload=function () {
context.drawImage(img,0,0);
}
img.src='resource/ok.jpg';
}
三、绘制圆
效果图：
好多圆
代码：
function draw(id) {
var canvas=document.getElementById(id);
if(canvas==null){
return false;
}
var context=canvas.getContext('2d');
context.fillStyle="#eeeeef";
context.fillRect(0,0,300,400);
for(var i=0;i<10;i++){
context.beginPath();
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
//参数分别为x轴坐标、y轴坐标、圆的半径、圆弧的起始点（x轴方向开始计算）、圆弧终点、true为逆时针绘制，false为顺时针绘制
context.closePath();//一定要关闭路径！！
context.fillStyle="rgba(255,0,0,0.25)";//0.25是透明度
context.fill();
}
}
四、绘制渐变图形
效果图：
渐变图
代码：
function draw(id) {
var canvas=document.getElementById(id);
if(canvas==null){
return false;
}
var context=canvas.getContext('2d');
var g1=context.createLinearGradient(0,0,0,300);
//参数起点的x轴坐标、起点y轴坐标、终点的x轴坐标、终点的y轴坐标
g1.addColorStop(0,'rosybrown');
g1.addColorStop(1,'white');
context.fillStyle=g1;
context.fillRect(0,0,500,500);
}
效果图：
渐变图形
function draw(id) {
var canvas=document.getElementById(id);
if(canvas==null){
return false;
}
var context=canvas.getContext('2d');
var g1=context.createLinearGradient(0,0,0,300);
//参数起点的x轴坐标、起点y轴坐标、终点的x轴坐标、终点的y轴坐标
g1.addColorStop(0,'rosybrown');
g1.addColorStop(1,'white');
context.fillStyle=g1;
context.fillRect(0,0,500,500);
var g2=context.createLinearGradient(0,0,300,0);
g2.addColorStop(0,'rgba(0,0,255,0.5)');
g2.addColorStop(1,'rgba(255,0,0,0.5)');
for(var i=0;i<10;i++){
context.beginPath();
context.fillStyle=g2;
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
context.closePath();
context.fill();
}
}
效果图：
五角星+阴影效果
代码：
function draw(id) {
var canvas=document.getElementById(id);
if(canvas==null){
return false;
}
var context=canvas.getContext('2d');
context.fillStyle='#eeeeef';
context.shadowOffsetX=10;
context.shadowOffsetY=10;
context.shadowColor='rgba(100,100,100,0.5)';
context.shadowBlur=7.5;
context.translate(0,50);
for(var i=0;i<3;i++){
context.translate(50,50);
create5Star(context);
context.fill();
}
}
function create5Star(context) {
var n=0;
var dx=100;
var dy=0;
var s=50;
context.beginPath();
context.fillStyle='rgba(255,0,0,0.5)';
var x=Math.sin(0);
var y=Math.cos(0);
var dig=Math.PI/5*4;
for(var i=0;i<5;i++){
var x=Math.sin(i*dig);
var y=Math.cos(i*dig);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();
}
五、使用库绘制
下载库（github源码）：https://createjs.com/downloads
说明文档：\EaselJS-master\docs\EaselJS_docs里面的index.html
引入文件：\EaselJS-master\lib\easeljs.min.js
绘制文本
代码：
<canvas id="canvas" width="500px" height="500px"></canvas>
<script>
var canvas;
var stage;
var txt;
window.onload = function(){
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
txt=new createjs.Text("number->","20px Arial","rosybrown");//文字、大小字体、颜色
stage.addChild(txt);
stage.update();
}
</script>
动态图实现效果：
动态图
代码：
<canvas id="canvas" width="500px" height="500px"></canvas>
<script>
var canvas;
var stage;
var txt;
var count=0;
window.onload = function(){
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
txt=new createjs.Text("number->0","20px Arial","rosybrown");//文字、大小字体、颜色
stage.addChild(txt);
createjs.Ticker.setFPS(30);//页面每秒显示30帧
createjs.Ticker.addEventListener('tick',tick);
}
function tick(e) {
count++;
txt.text="number->"+count;
stage.update();
}
</script>
更酷炫的可以参考\EaselJS-master\examples！
实现效果：
酷炫效果
代码：
<body>
<canvas id="canvas" width="500px" height="500px"></canvas>
<script>
var canvas;
var stage;
var img=new Image();
var sprite;
window.onload = function(){
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
stage.addEventListener('stagemousedown',clickCanvas);
stage.addEventListener('stagemousemove',moveCanvas);
var data={
images:['resource/spritesheet_sparkle.png'],
frames:{width:20,height:20,regX:10,regY:10}
}
sprite = new createjs.Sprite(new createjs.SpriteSheet(data));
createjs.Ticker.setFPS(20);
createjs.Ticker.addEventListener("tick",tick);
}
function tick(e){
var t = stage.getNumChildren();
for(var i = t-1;i>0;i--){
var s = stage.getChildAt(i);
s.vY +=2;
s.vX +=1;
s.x += s.vX;
s.y += s.vY;
s.scaleX = s.scaleY =s.scaleX+ s.vS;
s.alpha += s.vA;
if(s.alpha <= 0 || s.y >canvas.height){
stage.removeChildAt(i);
}
}
stage.update(e);
}
function clickCanvas(e){
addS(Math.random()*200 + 100,stage.mouseX,stage.mouseY,2);
}
function moveCanvas(e){
addS(Math.random()*2 + 1,stage.mouseX,stage.mouseY,1);
}
function addS(count,x,y,speed) {
for(var i=0;i<count;i++){
var s=sprite.clone();
s.x=x;
s.y=y;
s.alpha=Math.random()*0.5+0.5; //透明度的变化
s.scale=s.scaleY=Math.random()+0.3; //缩放的效果
var a=Math.PI*2*Math.random();
var v=(Math.random()-0.5)*30*speed;
s.vX=Math.cos(a)*v;
s.vY=Math.sin(a)*v;
s.vS=(Math.random()-0.5)*0.2; //scale的变化
s.vA=-Math.random()*0.05-0.01;//alpha的变化
stage.addChild(s);
}
}
</script>
</body>
