导航：首页 > 开发技术 >

如何用代码实现HTML5Canvas基础绘图

发表于：2025-02-03 作者：千家信息网编辑

千家信息网最后更新 2025年02月03日，如何用代码实现HTML5Canvas基础绘图，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。基本绘制XML/HTML Code复制内容

千家信息网最后更新 2025年02月03日如何用代码实现HTML5Canvas基础绘图

如何用代码实现HTML5Canvas基础绘图，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

基本绘制

XML/HTML Code复制内容到剪贴板

var canvas = document.getElementById('canvas');   if (canvas.getContext) {       var context = canvas.getContext('2d');       // 线宽       context.lineWidth = 4;       // 画笔颜色       context.strokeStyle = 'red';       // 填充色       context.fillStyle = "red";       // 线帽类型       context.lineCap = 'butt'; // round, square       // 开始路径       context.beginPath();       // 起点       context.moveTo(10,10);       // 终点       context.lineTo(150,50);       // 绘制       context.stroke();   ｝

矩形

XML/HTML Code复制内容到剪贴板

var canvas = document.getElementById('canvas');   if (canvas.getContext) {       context.beginPath();       context.strokeRect(10,10,70,40);       // 矩形的另一种方式       context.rect(10,10.70,40);       context.stroke();               // 实心矩形       context.beginPath();       context.fillRect(10,10,70,40);       // 另一种方式实心矩形       context.beginPath();       context.rect(10,10,70,40);       context.fill();   ｝

圆形

XML/HTML Code复制内容到剪贴板

var canvas = document.getElementById('canvas');   if (canvas.getContext) {       context.beginPath();       // 圆中心坐标x, 圆中心坐标Y, 圆弧半径， 起始角度，终止角度，是否逆时针       // 第4个参数和第五个参数是要传入的弧度，如果画30角度，需要将其转化为弧度 30 * Math.PI / 180       context.arc(100,100,70,0,130 * Math.PI / 180, true);       context.stroke();       context.fill();   ｝

圆角

XML/HTML Code复制内容到剪贴板

var canvas = document.getElementById('canvas');   if (canvas.getContext) {       context.beginPath();       context.moveTo(20,20);       context.lineTo(70,20);          // 为一条路径画弧度p1.x p1.y p2.x, p2.y 弧半径，        context.arcTo(120,30,120,70, 50);       context.lineTo(120,120);       context.stroke();               // 擦除canvas 画板       context.beginPath();       context.fillRect(10,10,200,100);               // 擦除区域       context.clearRect(30,30,50,50);   ｝

二次贝塞尔曲线

XML/HTML Code复制内容到剪贴板

var canvas = document.getElementById('canvas');   if (canvas.getContext) {         context.beginPath();         context.moveTo(100,100);         context.quadraticCurveTo(20,50,200,20);         context.stroke();   ｝

三次贝塞尔曲线

XML/HTML Code复制内容到剪贴板

var canvas = document.getElementById('canvas');   if (canvas.getContext) {        context.moveTo(68,130);        var cX1 = 20;        var cY1 = 10;        var cX2 = 268;        var cY2 = 10;        var endX = 268;        var endY = 170;        context.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);        context.stroke();               // 利用clip指定绘图区域，指定绘图区域之后，只能在绘图区域中进行绘图擦欧总       // 绘制圆形       context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);       // 限制区域       context.clip();       // 开始尝试绘制其他       context.beginPath();       context.fillStyle = 'lightblue';       // 结果矩形并没有显示出来       context.fillRect(0,0,300,150);   }

画板进阶使用

XML/HTML Code复制内容到剪贴板

var canvas = document.getElementById('canvas');   if (canvas.getContext) {       var context = canvas.getContext('2d');       /*        * drawImage(image,dx,dy)        * drawImage(image,dx,dy,dw,dh)        * drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);        * image 绘图对象        * dx dy canvas 的坐标        * dw，dh 表示 image 在canvas中即将绘图的位置        * sw，sh 表示image 所要绘图的区域        * sx,sy 所要绘图的开始位置         */       var image = document.getElementById('img');       context.drawImage(image, 0, 0);        var img = new Image();        img.src = 'images/1.jpg';        img.onload = function(){                         // drawImage             // 从 0,0 坐标开始绘制            // context.drawImage(img,0,0);            // 从0，0 开始,绘制整张图到100,100 长宽            // context.drawImage(img, 0, 0, 100, 100);            // 截图,50,50 到 100,100 从 260,130 开始绘制，放到 100,100 长宽区域中            // context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100);                         // 利用getImageData 和 putImageData 绘制图片              context.drawImage(img, 10, 10);            // 从画板上获取像素数据            // 开始位置， 结束位置            var imgData = context.getImageData(50,50,100,100);            // 将数据画到画板指定位置坐标            context.putImageData(imgData,10,260);            // 将所去的像素数据一部分，画到画板上            context.putImageData(imgData,200,260,50,50,100,100);                            // createImageData 创建像素             var imgData = context.getImageData(50,50,200,200);             // 创建指定大小的空对象             var imgData01 = context.createImageData(imgData);                           for (i = 0; i < imgData01.width * imgData01.height * 4; i+=4) {                 // 红色像素                 imgData01.data[i + 0] = 255;                 imgData01.data[i+1] = 0;                 imgData01.data[i+2] = 0;                 imgData01.data[i+3] = 255;                               }             context.putImageData(imgData01, 10, 260);        }   }

关于如何用代码实现HTML5Canvas基础绘图问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注行业资讯频道了解更多相关知识。

很赞哦！