如何用代码实现HTML5Canvas基础绘图
短信预约 -IT技能 免费直播动态提醒
如何用代码实现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'); var image = document.getElementById('img'); context.drawImage(image, 0, 0); var img = new Image(); img.class="lazy" data-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基础绘图问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网行业资讯频道了解更多相关知识。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
