新建一个html标签

<canvas id=\'canvas\' width=\'300\' height=\'300\'>不支持</canvas>

如果不给<canvas>设置widht、height属性时，则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用css属性来设置<canvas>的宽高。

 

由于浏览器对HTML5标准支持不一致，所以，通常在<canvas>内部添加一些说明性HTML代码，如果浏览器支持Canvas，它将忽略<canvas>内部的HTML，如果浏览器不支持Canvas，它将显示<canvas>内部的HTML：

<canvas>
    你的浏览器不支持canvas,请升级你的浏览器
</canvas>

使用canvas第一步 首先检测浏览器是否支持canvas

var canvas = document.getElementById(\'canvas\');
if (canvas.getContext) {
    console.log(\'你的浏览器支持Canvas!\');
} else {
    console.log(\'你的浏览器不支持Canvas!\');
}

 

getContext(\'2d\')方法让我们拿到一个CanvasRenderingContext2D对象，所有的绘图操作都需要通过这个对象完成。

var ctx = canvas.getContext(\'2d\');

如果需要绘制3D怎么办？HTML5还有一个WebGL规范，允许在Canvas中绘制3D图形：

ctx2 = canvas.getContext(\"webgl\");

绘制形状

首先第一步先了解一下cancas的坐标系统：

\"\"

Canvas的坐标以左上角为原点，水平向右为X轴，垂直向下为Y轴，以像素为单位，所以每个点都是非负整数。

简单绘制两个长方形

<html>
<head>
    < >Canvas tutorial</ >
</head>
<canvas id=\"canvas\" width=\"300\" height=\"300\"></canvas>
</body>
<  type=\"text/ \">
    function draw(){
        var canvas = document.getElementById(\'canvas\');
        if(!canvas.getContext) return;
        var ctx = canvas.getContext(\"2d\");
        ctx.fillStyle = \"rgb(200,0,0)\";
      	//绘制矩形
        ctx.fillRect (10, 10, 55, 50); // fillRect(x,y,width,height);

        ctx.fillStyle = \"rgba(0, 0, 200, 0.5)\";
        ctx.fillRect (30, 30, 55, 50);
    }
    draw();
</ >
</html>

效果图如下：

\"\"

绘制呆阴影的文字:

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    ctx.shadowBlur = 2;
    ctx.shadowColor = \'#666666\';
    ctx.font = \'24px Arial\';
    ctx.fillStyle = \'#333333\';
    ctx.fillText(\'带阴影的文字\', 20, 40);

Canvas除了能绘制基本的形状和文本，还可以实现动画、缩放、各种滤镜和像素转换等高级操作。如果要实现非常复杂的操作，考虑以下优化方案：

  • 通过创建一个不可见的Canvas来绘图，然后将最终绘制结果复制到页面的可见Canvas中；

  • 尽量使用整数坐标而不是浮点数；

  • 可以创建多个重叠的Canvas绘制不同的层，而不是在一个Canvas中绘制非常复杂的图；

  • 背景图片如果不变可以直接用<img>标签并放到最底层。

// 图片缩放 drawImage(image, x, y, width, height)
ctx.drawImage(img, 0, 0, 400, 200)
    // 旋转
    ctx.fillStyle = \"red\";
    ctx.save();
    ctx.translate(100, 100);
    ctx.rotate(Math.PI / 180 * 45);
    ctx.fillStyle = \"blue\";
    ctx.fillRect(0, 0, 100, 100);
    ctx.restore();
    ctx.save();
    ctx.translate(0, 0);
    ctx.fillRect(0, 0, 50, 50)
    ctx.restore();

\"\"

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章