html用画布画图,HTML5入门十---Canvas画布实现画图（一）

水深无声 2022-10-10 15:45 288阅读 0赞

\}.ToolBar\{float:left;font-family:"微软雅黑";font-size:14px;font-variant:small-caps;text-align:center;background:\#F2F7EE;padding:10px 15px 3px 10px;margin-bottom:1px;margin-right:1px;border:1px solid \#7B899B;

\}.ToolBar button\{padding:6px;margin:7px 2px;font-variant:normal;font-size:12px;

\}canvas\{border:1px solid \#7B899B;

\}img\{padding:2px;border:2px solid \#F2F7EE;

\}img:hover\{/\*当鼠标悬停在图片上\*/border:2px groove \#E4F0FE;background:white;

\}img.Selected\{border:2px groove \#E4F0FE;

\}\#saveCopyContainer\{display:none;

\}\#saveCopyContainer img\{width:250px;height:150px;

\}.CanvasContainer\{

\}

varcanvas;varcontext;varisDrawing=false;

window.οnlοad=function()\{

canvas=document.getElementById("drawingCanvas");

context=canvas.getContext("2d");

canvas.οnmοusedοwn=startDrawing;

canvas.οnmοuseup=stopDrawing;

canvas.οnmοuseοut=stopDrawing;

canvas.οnmοusemοve=draw;

\}functionstartDrawing(e)

\{

isDrawing= true;

context.beginPath();

context.moveTo(e.pageX-canvas.offsetLeft,e.pageY-canvas.offsetTop);

\}functionstopDrawing()

\{

isDrawing=false;

\}functiondraw(e)

\{if(isDrawing)

\{varx=e.pageX-canvas.offsetLeft;vary=e.pageY-canvas.offsetTop;

context.lineTo(x,y);

context.stroke();

\}

\}functionchangeColor(color,imgEle)

\{

context.strokeStyle=color;

imgEle.className= "Selected";

\}functionchangethickness(thickness,imgEle)

\{

context.lineWidth=thickness;

imgEle.className= "Selected";

\}functionclearCanvas()\{

context.clearRect(0,0,canvas.width,canvas.height)

\}functionsaveCanvas()\{varimageCopy=document.getElementById("saveImageCopy");

imageCopy.src=canvas.toDataURL();varimageContainer=document.getElementById("saveCopyContainer");

imageContainer.style.display= "block";

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，288人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5 svg画布

svg画布创建（svg）线条（line）获取属性修改属性创建矩形（rect）

客官°小女子只卖身不卖艺/ 2023年06月23日 05:58/ 0 赞/ 52 阅读

相关 HTML5 canvas 画布

画布 canvas 与 svg canvas 能够做什么？创建一块小画布（canvas）创建画笔（getC

秒速五厘米/ 2023年06月22日 05:19/ 0 赞/ 54 阅读

相关 HTML5的学习之canvas画布(一)

HTML5的学习之canvas画布前面几篇博客我们一直在讲如何使用canvas绘制一下图片，但是没有讲过canvas如何使用，都有哪些属性，方法等。今天我们就来讲一讲c

Dear 丶/ 2023年02月17日 14:24/ 0 赞/ 58 阅读

相关 html5新属性----Canvas画布

HTML5 Canvas `<canvas>`标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，

Myth丶恋晨/ 2022年11月30日 04:06/ 0 赞/ 331 阅读

相关 html用画布画图,HTML5入门十---Canvas画布实现画图（一）

\}.ToolBar\{float:left;font-family:"微软雅黑";font-size:14px;font-variant:small-caps;text-al

水深无声/ 2022年10月10日 15:45/ 0 赞/ 289 阅读

相关 html画布动画,HTML5画布CANVAS动画。

就剩那两个大半圆不知道怎么用代码表示了，求大神给看下，怎么设置的才可以以自己的圆心来转。实现旋转的八卦。不能上传视频，有个转的过程图，在最下面。 your browser d

柔光的暖阳◎/ 2022年10月06日 11:45/ 0 赞/ 342 阅读

相关 html5 canvas 画布基础

canvas 画布基础学习整理的笔记，内容丰富有绘制矩形，绘制线条，绘制二次贝塞尔曲线，绘制弧线等。知识点在代码注释中效果图： ![Center][]

蔚落/ 2022年08月19日 13:08/ 0 赞/ 331 阅读

相关 HTML5学习笔记（三）canvas画布基础

一、基本内容 Canvas在HTML页面提供画布的功能，在画布中绘制各种图形 Canvas绘制的图形与HTML页面无关，无法通过DOM获取绘制

分手后的思念是犯贱/ 2022年04月17日 00:26/ 0 赞/ 359 阅读

相关 HTML5画布canvas实战(1)--折线图

画布基本教程 [画布基础知识和绘制][Link 1] [Canvas MDN][] 唠唠叨叨 > canvas 是 HTML5 新增的元素，可用于通过使用Ja

左手的ㄟ右手/ 2022年02月23日 06:34/ 0 赞/ 721 阅读

相关 html5 canvas清空画布方法

总结以下三种清空canvas画布的方式： 1. 最简单的方法：由于canvas每当高度或宽度被重设时，画布内容就会被清空，因此可以用以下方法清空： \[javascript

àì夳堔傛蜴生んèń/ 2021年09月14日 09:28/ 0 赞/ 628 阅读