网页在图片上画长方形和直线，并且能控制和编辑

最新推荐文章于 2022-12-18 13:08:19 发布
最新推荐文章于 2022-12-18 13:08:19 发布
阅读量756 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baby_you_Know/article/details/100879370
版权

网页在图片上画长方形和直线，并且能控制和编辑

网页在图片上画长方形和直线，并且能控制和编辑

工作上用到了 在一张图片上画正方形和直线。并且可以控制和编辑

Your browser does not support the canvas element. 长方形 直线

var c=document.getElementById(“myCanvas”);
var cxt=c.getContext(“2d”);
var img=new Image()
img.src=“1.jpg”
var zhzcztx = “”;

//已有长方形
var changfx = [];
//已经点击的长方形
var SelectedRect;
function rectar(x,y,width,height,qdfw){
this.x = x;
this.y = y;
this.w = width;
this.h = height;
this.isSelected = false;
//起点方位
this.qdfw = qdfw;
//鼠标悬浮时临时起点位置
this.xfwz = {};
}

//已有直线
var zxy = [];
//已选直线
var selectedLine;
function line(x,y,x1,y1,fangx){
this.x = x;
this.y = y;
this.x1 = x1;
this.y1 = y1;
this.isSelected = false;
//方向
this.fangx=fangx
//鼠标悬浮时临时起点位置
this.xfwz = {};
}

//起点位置
var qidian = {};
//移动的位置
var yidong = {};
//标识位标识操作
var candraw = ‘no’;
//时间轴
var intervalli;
//鼠标样式提示
var cursor = ‘default’;
//临时的xy用于托动
var linsxy = {}
function func(){
zhzcztx = document.getElementById(“tuxing”).value;
}
img.onload = function() {
//清理掉时间轴
//clearInterval(intervalli);
document.getElementById(“myCanvas”).width = img.width;
document.getElementById(“myCanvas”).height = img.height;
cxt.drawImage(img,0,0);
intervalli = setInterval(“huizhi()”,“50”);
zhzcztx = document.getElementById(“tuxing”).value;
}

//鼠标悬浮事件
function canvasOver(e){
var xyobj = getxy(e);
var signinline = “default”;
//检测长方形部分
//标志位看鼠标是否在线上
if (SelectedRect != null){
var objsxy = cfxsiddian (xyobj,SelectedRect);
if (objsxy.sbstyle!=""){
signinline = objsxy.sbstyle;
SelectedRect.xfwz.x = objsxy.x;
SelectedRect.xfwz.y = objsxy.y;
}
//先看是否在已选长方形线上
else if(cfxsixian(xyobj.x,xyobj.y,SelectedRect.x,SelectedRect.x+SelectedRect.w,SelectedRect.y,SelectedRect.y+SelectedRect.h,SelectedRect.qdfw)){
signinline = “move”;
}
}
for(var i=changfx.length-1; i>=0; i–) {
var rect = changfx[i];
if(!rect.isSelected){
if(cfxsixian(xyobj.x,xyobj.y,rect.x,rect.x+rect.w,rect.y,rect.y+rect.h,rect.qdfw)){
signinline = ‘pointer’;
}
}
}
//检测直线部分
if(selectedLine!=null){
var silis = zhixisnotLia(xyobj,selectedLine);
if(silis!=""){
signinline = silis
}else if(jiancezhix(xyobj,selectedLine)){
signinline = “move”;
}
}
for(var i=zxy.length-1; i>=0; i–){
var lineobj = zxy[i];
if(!lineobj.isSelected){
if(jiancezhix(xyobj,lineobj)){
signinline = ‘pointer’;
}
}
}
cursor = signinline;
c.style.cursor=signinline;
}
//直线鼠标在俩点上
function zhixisnotLia(xyobj,lineobj){
if(xyobj.x>=lineobj.x-2&&xyobj.x<=lineobj.x+2&&xyobj.y>=lineobj.y-2&&xyobj.y<=lineobj.y+2){
selectedLine.xfwz = {x:lineobj.x1,y:lineobj.y1};
return “w-resize”;
}else if(xyobj.x>=lineobj.x1-2&&xyobj.x<=lineobj.x1+2&&xyobj.y>=lineobj.y1-2&&xyobj.y<=lineobj.y1+2){
selectedLine.xfwz = {x:lineobj.x,y:lineobj.y};
return “w-resize”;
}
return “”;
}
var offset = 5;
//检测是否在直线上
function jiancezhix(xyobj,lineobj){
var minX = Math.min(lineobj.x, lineobj.x1); // 较小的X轴坐标值
var maxX = Math.max(lineobj.x, lineobj.x1); // 较大的X轴坐标值
var minY = Math.min(lineobj.y, lineobj.y1); // 较小的Y轴坐标值
var maxY = Math.max(lineobj.y, lineobj.y1); // 较大的Y轴坐标值
if (lineobj.y === lineobj.y1) {
// 水平线
if ((xyobj.x >= minX && xyobj.x <= maxX) && (xyobj.y >= minY - offset && xyobj.y <= maxY + offset)) {
return true;
}
}else if (lineobj.x === lineobj.x1) {
// 垂直线
if ((xyobj.y >= minY && xyobj.y <= maxY) && (xyobj.x >= minX - offset && xyobj.x <= maxX + offset)) {
return true;
}
} else {
// 斜线 (先判断点是否进入可接受大范围(矩形)，然后再根据直线上的交叉点进行小范围比较)
if ((xyobj.x >= minX && xyobj.x <= maxX) && (xyobj.y >= minY - offset && xyobj.y <= maxY + offset)) {
//求Y轴坐标
//方法1：根据tanθ= y/x = y1/x1, 即y = (y1/x1)x (该方法有局限性，垂直线(p2.x - p1.x)=0，不能用)
//var y = ((p2.y - p1.y) / (p2.x - p1.x)) * (px - p1.x);
//方法2：先求弧度hudu，根据cosθ=x/r, r=x/cosθ,求得r，再根据sinθ=y/r, y=sinθr, 求得y
var hudu = Math.atan2(lineobj.y1 - lineobj.y, lineobj.x1 - lineobj.x); // 直线的弧度(倾斜度)
// 用三角函数计出直线上的交叉点
var r = (xyobj.x - lineobj.x) / Math.cos(hudu); // 直角三角形的斜边（或理解成圆的半径）
var y = Math.sin(hudu) * r; // Y轴坐标
var p = { x: xyobj.x, y: lineobj.y + y }; // 直线上的交叉点
if ((Math.abs(xyobj.x - p.x) <= offset) && (Math.abs(xyobj.y - p.y) <= offset)) {
return true; // 1 - 点中
}
}
}
return false;
}

//点击
function canvasClick(e){
var xyobj = getxy(e);
//判定点的是长方形
for(var i=changfx.length-1; i>=0; i–) {
var rect = changfx[i];
if(cfxsixian(xyobj.x,xyobj.y,rect.x,rect.x+rect.w,rect.y,rect.y+rect.h,rect.qdfw)){
//点击到了某个长方形的线上
SelectedRect = rect;
rect.isSelected = true;
return;
}
}
//判定点的是直线
for(var i=zxy.length-1; i>=0; i–) {
var linobj = zxy[i];
if(jiancezhix(xyobj,linobj)){
//点击到了直线上
selectedLine = linobj;
linobj.isSelected = true;
return;
}
}
}
//获得直线的方向
function zhixGetFx(x,y,x1,y1){
var fx = “”;
if(x1<x&&y1y){
fx = “z”
}else if(x1>x&&y1y){
fx = “y”
}else if(x1x&&y1>y){
fx = “x”
}else if(x1x&&y1<y){
fx = “s”
}else if(x1x&&y1>y){
fx = “x”
}else if(x1>x&&y1>y){
fx = “yx”
}else if(x>x1&&y>y1){
fx = “zs”
}else if(x1>x&&y>y1){
fx = “ys”
}else if(x>x1&&y1>y){
fx = “zx”
}
return fx;
}
function canvaUp(e){
//不能画
candraw = ‘no’;
var isnull = (JSON.stringify(yidong) == “{}”);
if(!isnull){
if(qidian.x!=yidong.x&&qidian.y!=yidong.y){
if(zhzcztx’cfx’){
//生成已存在长方形
var fangwei = getqidfw(qidian,yidong);
var rect=new rectar(qidian.x,qidian.y,yidong.x-qidian.x,yidong.y-qidian.y,fangwei);
changfx.push(rect);
//创建完默认被选
rect.isSelected = true;
SelectedRect = rect;
}else{
var fx = zhixGetFx(qidian.x,qidian.y,yidong.x,yidong.y)
var lineobj=new line(qidian.x,qidian.y,yidong.x,yidong.y,fx);
zxy.push(lineobj);
//创建完默认被选
lineobj.isSelected = true;
selectedLine = lineobj;
}
}
}
//初始化终点
yidong = {};
}

function canvasMove(e){
let objxy = getxy(e);
if(candraw==‘hua’){
//画图的移动
yidong.x = objxy.x;
yidong.y = objxy.y;
}if(candraw==‘yi’){
if(SelectedRect!=null){
//控制移动图形
SelectedRect.x = objxy.x-linsxy.x
SelectedRect.y = objxy.y-linsxy.y
}else if(selectedLine!=null){
//直线移动
selectedLine.x = objxy.x-linsxy.x
selectedLine.y = objxy.y-linsxy.y
selectedLine.x1 = objxy.x-linsxy.x1
selectedLine.y1 = objxy.y-linsxy.y1
}
}else if(candraw==‘las’){
if(SelectedRect!=null){
//拉伸已选长方形
SelectedRect.x = SelectedRect.xfwz.x;
SelectedRect.y = SelectedRect.xfwz.y;
SelectedRect.w = objxy.x-SelectedRect.x;
SelectedRect.h = objxy.y-SelectedRect.y;
SelectedRect.qdfw = getqidfw(SelectedRect.xfwz,objxy);
}else if(selectedLine!=null){
selectedLine.x = selectedLine.xfwz.x;
selectedLine.y = selectedLine.xfwz.y;
selectedLine.x1 = objxy.x;
selectedLine.y1 = objxy.y;
selectedLine.fangx = zhixGetFx(selectedLine.xfwz.x,selectedLine.xfwz.y,objxy.x,objxy.y);
}
}else{
//悬浮的移动为了鼠标变化
canvasOver(e);
}
}

function canvasDown(e){
// client是基于整个页面的坐标，offset是cavas距离pictureDetail顶部以及左边的距离
let objxy = getxy(e);
qidian.x = objxy.x;
qidian.y = objxy.y;
if(cursor===‘default’){
clearSelectAlready();
//画图
candraw = ‘hua’;
}else if(cursor===‘move’){
//移动长方形
if(SelectedRect!=null){
linsxy.x = objxy.x-SelectedRect.x
linsxy.y = objxy.y-SelectedRect.y
}else if(selectedLine!=null){
//直线移动
linsxy.x = objxy.x-selectedLine.x
linsxy.y = objxy.y-selectedLine.y
linsxy.x1 = objxy.x-selectedLine.x1
linsxy.y1 = objxy.y-selectedLine.y1
}
candraw=‘yi’;
}else if(cursor===‘nw-resize’){
//左上 右下 做拉伸
candraw=‘las’;
}else if(cursor===‘ne-resize’){
//右上 左下做拉伸
candraw=‘las’;
}else if(cursor===‘w-resize’){
//直线左右拉伸
candraw=‘las’;
}else if (cursor===‘pointer’){
clearSelectAlready();
//点击
canvasClick(e);
}
}

//时间轴绘制
function huizhi(){
//清掉上面所有的东西
clearCanvas();
//绘制图片
cxt.drawImage(img,0,0);
//绘制已存在的形状
xingzhuang();
if(zhzcztx==‘cfx’){
//绘制长方形
changfxing();
}else{
//绘制直线
zhixian();
}
//绘制文字
}
//绘制正在进行的长方形
function changfxing(){
cxt.strokeRect(qidian.x,qidian.y,yidong.x-qidian.x,yidong.y-qidian.y);
}
//画直线
function zhixian (){
cxt.beginPath();
cxt.moveTo(qidian.x,qidian.y);
cxt.lineTo(yidong.x,yidong.y);
cxt.stroke();
}
//绘制已存在的形状
function xingzhuang(){
//长方形
for ( var i = 0; i <changfx.length; i++){
rect = changfx[i];
if(rect.isSelectedtrue){
cxt.lineWidth = 3;
}else{
cxt.lineWidth = 1;
}
cxt.strokeRect(rect.x,rect.y,rect.w,rect.h);
cxt.lineWidth = 1;
}
//直线
for ( var i = 0; i <zxy.length; i++){
var lineobj = zxy[i];
if(lineobj.isSelectedtrue){
cxt.lineWidth = 3;
}else{
cxt.lineWidth = 1;
}
cxt.beginPath();
cxt.moveTo(lineobj.x,lineobj.y);
cxt.lineTo(lineobj.x1,lineobj.y1);
cxt.stroke();
cxt.lineWidth = 1;
}
}
function clearCanvas(){
cxt.clearRect(0, 0, c.width, c.height)
cxt.drawImage(img, 0, 0)
}
//长方形四条线的判断 鼠标是否在上面
//参数依次位 点击的x 点击的y 长方形宽的起点 宽的终点 高的起点 高的终点
function cfxsixian(clickX,clickY,widthstarts,widthends,heightstarts,heightends,qdfw){
if(qdfw==“zs”){
if((clickX>=widthstarts-1&&clickX<=widthstarts+1&&clickY>heightstarts&&clickY<heightends)
||(clickX>=widthends-1&&clickX<=widthends+1&&clickY>heightstarts&&clickY<heightends)
||(clickX>widthstarts&&clickX<widthends&&clickY>=heightstarts-1&&clickY<=heightstarts+1)
||(clickX>widthstarts&&clickX<widthends&&clickY>=heightends-1&&clickY<=heightends+1)){
return true;
}else{
return false;
}
}else if(qdfw==“zx”){
if((clickX>=widthstarts-1&&clickX<=widthstarts+1&&clickY<heightstarts&&clickY>heightends)
||(clickX>=widthends-1&&clickX<=widthends+1&&clickY<heightstarts&&clickY>heightends)
||(clickX>widthstarts&&clickX<widthends&&clickY>=heightstarts-1&&clickY<=heightstarts+1)
||(clickX>widthstarts&&clickX<widthends&&clickY>=heightends-1&&clickY<=heightends+1)){
return true;
}else{
return false;
}
}else if(qdfw==“ys”){
if((clickX>=widthstarts-1&&clickX<=widthstarts+1&&clickY>heightstarts&&clickY<heightends)
||(clickX>=widthends-1&&clickX<=widthends+1&&clickY>heightstarts&&clickY<heightends)
||(clickX<widthstarts&&clickX>widthends&&clickY>=heightstarts-1&&clickY<=heightstarts+1)
||(clickX<widthstarts&&clickX>widthends&&clickY>=heightends-1&&clickY<=heightends+1)){
return true;
}else{
return false;
}
}else if(qdfw==“yx”){
if((clickX>=widthstarts-1&&clickX<=widthstarts+1&&clickY<heightstarts&&clickY>heightends)
||(clickX>=widthends-1&&clickX<=widthends+1&&clickY<heightstarts&&clickY>heightends)
||(clickX<widthstarts&&clickX>widthends&&clickY>=heightstarts-1&&clickY<=heightstarts+1)
||(clickX<widthstarts&&clickX>widthends&&clickY>=heightends-1&&clickY<=heightends+1)){
return true;
}else{
return false;
}
}
}

//获得xy信息
function getxy(e){
var objxy = {};
objxy.x = e.clientX - e.target.parentNode.offsetLeft-5
objxy.y = e.clientY - e.target.parentNode.offsetTop-5
return objxy;
}

//长方形四个顶点的信息
function cfxsiddian (xyobj,SelectedRect){
var obj = {sbstyle:’’};
if(xyobj.x>=SelectedRect.x-2&&xyobj.x<=SelectedRect.x+2&&xyobj.y>=SelectedRect.y-2&&xyobj.y<=SelectedRect.y+2){
//起点
if(SelectedRect.qdfw==‘zs’){
//起点是左上
obj.sbstyle = ‘nw-resize’;
}else if(SelectedRect.qdfw==‘zx’){
//起点是左下
obj.sbstyle = ‘ne-resize’;
}else if(SelectedRect.qdfw==‘ys’){
//起点是右上
obj.sbstyle = ‘ne-resize’;
}else if(SelectedRect.qdfw==‘yx’){
//右下
obj.sbstyle = ‘nw-resize’;
}
obj.x = SelectedRect.x+SelectedRect.w;
obj.y = SelectedRect.y+SelectedRect.h;
}else if(xyobj.x>=SelectedRect.x+SelectedRect.w-2&&xyobj.x<=SelectedRect.x+SelectedRect.w+2&&xyobj.y>=SelectedRect.y-2&&xyobj.y<=SelectedRect.y+2){
//起点对应的横着的点
if(SelectedRect.qdfw==‘zs’){
//起点是左上
obj.sbstyle = ‘ne-resize’;
}else if(SelectedRect.qdfw==‘zx’){
//起点是左下
obj.sbstyle = ‘nw-resize’;
}else if(SelectedRect.qdfw==‘ys’){
//起点是右上
obj.sbstyle = ‘nw-resize’;
}else if(SelectedRect.qdfw==‘yx’){
//右下
obj.sbstyle = ‘ne-resize’;
}
obj.x = SelectedRect.x;
obj.y = SelectedRect.y+SelectedRect.h;
}else if (xyobj.x>=SelectedRect.x-2&&xyobj.x<=SelectedRect.x+2&&xyobj.y>=SelectedRect.y+SelectedRect.h-2&&xyobj.y<=SelectedRect.y+SelectedRect.h+2){
//起点对应竖着那点
if(SelectedRect.qdfw==‘zs’){
//起点是左上
obj.sbstyle = ‘ne-resize’;
}else if(SelectedRect.qdfw==‘zx’){
//起点是左下
obj.sbstyle = ‘nw-resize’;
}else if(SelectedRect.qdfw==‘ys’){
//起点是右上
obj.sbstyle = ‘nw-resize’;
}else if(SelectedRect.qdfw==‘yx’){
//右下
obj.sbstyle = ‘ne-resize’;
}
obj.x = SelectedRect.x+SelectedRect.w;
obj.y = SelectedRect.y;
}else if (xyobj.x>=SelectedRect.x+SelectedRect.w-2&&xyobj.x<=SelectedRect.x+SelectedRect.w+2&&xyobj.y>=SelectedRect.y+SelectedRect.h-2&&xyobj.y<=SelectedRect.y+SelectedRect.h+2){
//起点对应对各那点
if(SelectedRect.qdfw==‘zs’){
//起点是左上
obj.sbstyle = ‘nw-resize’;
}else if(SelectedRect.qdfw==‘zx’){
//起点是左下
obj.sbstyle = ‘ne-resize’;
}else if(SelectedRect.qdfw==‘ys’){
//起点是右上
obj.sbstyle = ‘ne-resize’;
}else if(SelectedRect.qdfw==‘yx’){
//右下
obj.sbstyle = ‘nw-resize’;
}
obj.x = SelectedRect.x;
obj.y = SelectedRect.y;
}
return obj;
}
//清理掉已经选的对象
function clearSelectAlready(){
if (SelectedRect != null) SelectedRect.isSelected = false;
SelectedRect = null;
if (selectedLine != null) selectedLine.isSelected = false;
selectedLine = null;
}
//获取起点方位
function getqidfw(qidian,yidong){
var fangwei = “”;
//起点
if(yidong.x-qidian.x>0&&yidong.y-qidian.y>0){
//起点是左上
fangwei = ‘zs’;
}else if(yidong.x-qidian.x>0&&yidong.y-qidian.y<0){
//起点是左下
fangwei = ‘zx’;
}else if(yidong.x-qidian.x<0&&yidong.y-qidian.y>0){
//起点是右上
fangwei = ‘ys’;
}else if(yidong.x-qidian.x<0&&yidong.y-qidian.y<0){
//右下
fangwei = ‘yx’;
}
return fangwei;
}

quan_zhan_web
关注
在网页上画一个矩形(HTML5 Canvas作图)
AI编程集团 金蝉脱壳的博客
08-13 1060
简化作图步骤，重写作图函数： function DrawRect(Canvas,A,C) { //画个矩形,“A、C”是对顶点 var p1,p2=new Array(2); p1=GetSmallest(A,C); p2=GetBiggest(A,C); with (Canvas)  {  rect(p1[0],p1[1],p2[0]-p1[0],p2[1]-p1[1]);
html制作一个立方体
weixin_42576410的博客
01-21 357
可以使用HTML中的div元素和CSS中的transform属性来制作一个立方体。 HTML代码： <divclass="cube"> <div class="face front"></div> <div class="face back"></div> <div class="face left"></d...
JavaScript 在网页上的图片中画矩形框,并得到实时对角坐标
kuronekonano的博客
08-05 3604
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>矩形绘制工具</title> <style type="text/css"> .box { background...
画图软件用C#做的可以画圆画矩形填充圆形还可以随机画矩形等等
10-25
小小的画图软件画图软件用C#做的可以画圆画矩形填充圆形还可以随机画矩形等等
原生js实现图片标记类似地图标记功能
07-05
原生js实现图片标记功能 类似与地图的标记.自己写的 ,只是静态图片的标记.坐标用的百分比 不会出现位置因为不同屏幕错乱.图片没有缩放 拖动等功能 标记也没有可以拖动的功能 因为这几个功能都要的话 那不就是地图标记了嘛 直接区扣百度地图就是了
创建基本图形和形状的技巧
在计算机图形学和设计领域，基本图形和形状通常包括线条、矩形、圆形、椭圆等简单的几何学元素。 ## 1.2 常见的基本图形和形状 常见的基本图形和形状包括： - 线条（直线、曲线） - 矩形（正方形、长方形） - 圆形 ...
Photoshop动画制作
zhdd1234的专栏
07-22 3834
（3600字）了解动画原理并制作简单的位移动画。动画形成原理是因为人眼有视觉暂留的特性，所谓视觉暂留就是在看到一个物体后，即时该物体快速消失，也还是会在眼中留下一定时间的持续影像，这在物体较为明亮的情况下尤为明显。最常见的就是夜晚拍照时使用闪光灯，虽然闪光灯早已熄灭，但被摄者眼中还是会留有光晕并维持一段时间。对这个特点最早期的应用，我们上小学时也许就都做过了，就是在课本的页脚画上许多人物的动作，然
案例+图解带你一文读懂Canvas【2W字，建议收藏】
专注于dreamweaver网页设计制作
08-09 1506
从翻译其实就能很好的了解到 canvas 是用来干什么的。画布！很好理解就是用来画画的。那具体怎么“画”咱们就得看一下具体的 API 文档了。canvas是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.Canvas API提供了一个通过JavaScript 和 HTML的Canvas元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。Canvas API主要聚焦于2D图形。...
SVG之旅：SVG简介
W3cplus
12-14 776
自从2014年开始陆陆续续的开始就在接触SVG。但由于自身的原因，并没有对SVG进行系统化的学习，在实际的工作项目中并未真正的使用SVG相关的技术。为了储备相关的知识，并尝试在项目中使用SVG，有必要对该技术进行系统化的梳理和学习。所以开始每周会抽出大半的时间来学习和整理SVG相关的知识，希望在几个月后，这方面的技术有所突破。为了能记录SVG的学习和探索过程，整个学习的路径以及笔记将会在W3cpl
HTML&CSS学习笔记 纯知识点版 (尚硅谷2019李立超版)
LiuKairui的博客
09-08 7728
此版为纯知识点无练习笔记版本 目录1. HTML基础1.1 网页的结构1.2 HTML中的"实体"1.3 meta 标签1.4 语义化标签1.7 列表1.8 超链接1.9 图1.10 内联框架1.11 音视频2. CSS基础2.1 CSS简介2.2 CSS基本语法2.3 CSS 选择器基础2.4 CSS的复合选择器2.5 关系选择器2.6 属性选择器2.7 伪类选择器2.8 `a`元素的伪类选择器2.9 伪元素选择器2.10 样式的继承2.11 样式的冲突与优先级问题2.12 长度单位2.13 颜色单位3
java设计一个可以根据鼠标的拖曳画直线，矩形，圆的画图程序。
01-06
java图形工具源代码 设计一个可以根据鼠标的拖曳画直线，矩形，圆的画图程序。
js画图，使用js画线条、多边形、艺术字及图片
11-20
利用js技术在网页上画出线条、多边形。。。 详细概述及示例
HTML 画布入门（三）使用 HTML 画布创建形状
琴歌声声送我的博客
12-18 1869
我们可以使用许多不同的功能来绘制新的形状，这些函数可以通过 we set 使用。遵循类似的格式，只是它会创建一个自动描边的矩形。我们用来确定三角形的起始位置，然后根据需要绘制线条来绘制我们想要的三角形的形状。我们还谈到了一个事实，可用于在画布上的任何地方绘制线条，使我们能够制作更复杂的形状，如六边形和八边形。如您所见，所有这些函数都遵循相同的格式 - 它们在开始位置具有坐标，以及画布中的宽度和高度。在本指南中，我们介绍了如何在HTML画布中制作一些简单的形状：正方形，矩形，圆形和三角形。
盒子模型1
weixin_45729175的博客
12-19 773
认识盒子模型 每个矩形都有元素的内容、内边距（padding）、边框(border)、外边距(margin)组成。 （1）网页是有多个盒子嵌套排列的结果。 （2）内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中。 （3）外边距是该元素与相邻元素之间的距离，如果给元素定义边框属性，边框将出现在内边距和外边距之间。 （4）虽然盒子模型拥有内边距、边...
前端web4
m0_55990888的博客
02-06 842
七 CSS-盒模型 7.1 盒模型--content 如何画一个矩形的格子：用到新的标签div标签。 div就是一个干净透彻的矩形 1. content 设置高度宽度 <div class="box"></div> .box { width: 200px; height: 100px; } 给矩形添加背景颜色 <div class="box"></div> .box { width: 200px; height: 100px...
html长方形代码_html基础代码大全
weixin_39609718的博客
12-22 2470
一、canvas 简介 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己 MacOS X WebKit 推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来，有人通过 Gecko 内核的浏览器 (尤其是 Moz...
html页面画一个矩形,使用HTML5 canvas绘制一个矩形的方法
weixin_29475313的博客
06-04 1998
使用HTML5 canvas绘制一个矩形的方法发布时间：2020-08-29 11:23:12来源：亿速云阅读：102作者：小新这篇文章将为大家详细讲解有关使用HTML5 canvas绘制一个矩形的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。使用HTML5 canvas绘制一个矩形，我们需要用到Canvas上下文的rect()方法。我们来看一个具体的例子代...
MATLAB在函数上两点绘制一定宽度和长度的长方形
最新发布
09-08
在MATLAB中绘制具有特定宽度和长度的长方形，你可以使用矩形绘制函数`rectangle`。这个函数允许你指定矩形的位置、大小以及其它属性，比如边框宽度和填充颜色等。下面是一个简单的例子，展示如何绘制一个中心在坐标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值