前言

HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

在使用canvas之前应该给用户说明必须是ie9+的版本,否则不支持。

基本知识学习

//上下文对象
var canvas = doucment.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "color";// 填充样式
ctx.strokeStyle = "color";//边框样式
ctx.fill();//填充区域
ctx.stroke();//绘制边框

绘制简单的直线

1.先获取画布
var canvas = document.getElementById('canvas');
2.配置绘制的环境
var context = canvas.getContext('2d');
3.在绘制之前,加上
context.beginPath(); // 意思是开始绘制
4.设置起点 
context.moveTo(10,10); // 这里的第一个参数是x轴,第二个参数是y轴
5.设置下一个点,
context.lineTo(x,y); // 下个一个点坐标
6. 结束绘制
context.closePath();
context.stroke() ;

canvas 元素在绘制图像是有两种方法:

context.fill()  // 填充 
context.stroke();// 绘制边框
//但是在绘制前,要先设置好它们的样式
context.fillStyle//填充的样式
例如:context.fillStyle = 'pink';//填充的颜色为粉色
context.strokeStyle//边框样式
context.lineWidth = 10;  // 设置线条的宽度 为10

canvas 元素在绘制图像是有两种路径

1、context.beginPath()  开始绘制

2、context.closePath()  结束绘制

系统默认在绘制第一个路径的开始点为beginPath。

如果画完前面的路径没有重新指定beginPath,那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制。

绘制矩形 

1、设置填充样式或者边框样式(ctx.fillStyle = "color";或者ctx.strokeStyle = "color";)

2、绘制矩形区域(如果采用fillRect或者strokeRect绘制矩形,可以省略第3步);

3、填充或者加上边框(ctx.fill();或者ctx.stroke();)

canvas 的原点坐标为左上角。

context.strokeRect(100,100, 50,50);// x  y  width  heigth  的参数   画出来的是 空心矩形
context.fillRect(100,100,100,100);   // 画出来的 实心矩形
context.clearRect(x,y,width,height);// x:清除矩形起点横坐标 y:清除矩形起点纵坐标  width:清除矩形长度   height:清除矩形高度

绘制线段

ctx.moveTo(x,y);-----这里必须以moveTo开头,其实是将你的原点移动了位置
ctx.lineTo(x,y);---绘制接下来的点。

注:一般情况下、只需要一个moveTo即可。

保存文件

var w=window.open(canvas.toDataURL("image/jpeg"),"smallwin","width=400,height=350");

实际案例-学写一个字

闲话少说,直接贴上学习的代码笔记(其实就是copy过来的,以作备忘)。核心代码片段:

var canvasWidth = Math.min( 800 , $(window).width() - 20 )
var canvasHeight = canvasWidth
var strokeColor = "black"
var isMouseDown = false
var lastLoc = {x:0,y:0}
var lastTimestamp = 0
var lastLineWidth = -1
var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")
canvas.width = canvasWidth
canvas.height = canvasHeight
$("#controller").css("width",canvasWidth+"px")
drawGrid()
$("#clear_btn").click(
    function(e){
        context.clearRect( 0 , 0 , canvasWidth, canvasHeight )
        drawGrid()
    }
)
$(".color_btn").click(
    function(e){
        $(".color_btn").removeClass("color_btn_selected")
        $(this).addClass("color_btn_selected")
        strokeColor = $(this).css("background-color")
    }
)
function beginStroke(point){
    isMouseDown = true
    //console.log("mouse down!")
    lastLoc = windowToCanvas(point.x, point.y)
    lastTimestamp = new Date().getTime();
}
function endStroke(){
    isMouseDown = false
}
function moveStroke(point){
    var curLoc = windowToCanvas( point.x , point.y );
    var curTimestamp = new Date().getTime();
    var s = calcDistance( curLoc , lastLoc )
    var t = curTimestamp - lastTimestamp
    var lineWidth = calcLineWidth( t , s );
    //draw
    context.beginPath();
    context.moveTo( lastLoc.x , lastLoc.y );
    context.lineTo( curLoc.x , curLoc.y );
    context.strokeStyle = strokeColor
    context.lineWidth = lineWidth
    context.lineCap = "round"
    context.lineJoin = "round"
    context.stroke()
    lastLoc = curLoc
    lastTimestamp = curTimestamp
    lastLineWidth = lineWidth
}
canvas.onmousedown = function(e){
    e.preventDefault()
    beginStroke( {x: e.clientX , y: e.clientY} )
};
canvas.onmouseup = function(e){
    e.preventDefault()
    endStroke()
};
canvas.onmouseout = function(e){
    e.preventDefault()
    endStroke()
};
canvas.onmousemove = function(e){
    e.preventDefault()
    if( isMouseDown ){
        moveStroke({x: e.clientX , y: e.clientY})
    }
};
canvas.addEventListener('touchstart',function(e){
    e.preventDefault()
    touch = e.touches[0]
    beginStroke( {x: touch.pageX , y: touch.pageY} )
});
canvas.addEventListener('touchmove',function(e){
    e.preventDefault()
    if( isMouseDown ){
        touch = e.touches[0]
        moveStroke({x: touch.pageX , y: touch.pageY})
    }
});
canvas.addEventListener('touchend',function(e){
    e.preventDefault()
    endStroke()
});
var maxLineWidth = 30;
var minLineWidth = 1;
var maxStrokeV = 10;
var minStrokeV = 0.1;
function calcLineWidth( t , s ){
    var v = s / t;
    var resultLineWidth;
    if( v <= minStrokeV )
        resultLineWidth = maxLineWidth;
    else if ( v >= maxStrokeV )
        resultLineWidth = minLineWidth;
    else{
        resultLineWidth = maxLineWidth - (v-minStrokeV)/(maxStrokeV-minStrokeV)*(maxLineWidth-minLineWidth);
    }
    if( lastLineWidth == -1 )
        return resultLineWidth;
    return resultLineWidth*1/3 + lastLineWidth*2/3;
}
function calcDistance( loc1 , loc2 ){
    return Math.sqrt( (loc1.x - loc2.x)*(loc1.x - loc2.x) + (loc1.y - loc2.y)*(loc1.y - loc2.y) )
}
function windowToCanvas( x , y ){
    var bbox = canvas.getBoundingClientRect()
    return {x:Math.round(x-bbox.left) , y:Math.round(y-bbox.top)}
}
function drawGrid(){
    context.save()
    context.strokeStyle = "rgb(230,11,9)"
    context.beginPath()
    context.moveTo( 3 , 3 )
    context.lineTo( canvasWidth - 3 , 3 )
    context.lineTo( canvasWidth - 3 , canvasHeight - 3 )
    context.lineTo( 3 , canvasHeight - 3 )
    context.closePath()
    context.lineWidth = 6
    context.stroke()
    context.beginPath()
    context.moveTo(0,0)
    context.lineTo(canvasWidth,canvasHeight)
    context.moveTo(canvasWidth,0)
    context.lineTo(0,canvasHeight)
    context.moveTo(canvasWidth/2,0)
    context.lineTo(canvasWidth/2,canvasHeight)
    context.moveTo(0,canvasHeight/2)
    context.lineTo(canvasWidth,canvasHeight/2)
    context.lineWidth = 1
    context.stroke()
    context.restore()
}

具体效果演示请见:学写一个字案例

作者: 一蓑烟雨

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

分类: Html5系列
posted 阅读(73 ) 评论(0 )

评论内容: