描述scale()| 缩放当前绘图至更大或更小회전() |
旋转当前绘图translate() |
중신형(0,0) 位置transform() |
替换绘图的当前转换矩阵setTransform()将当转换重置为单位矩阵。然后运行 변환()
Canvas적API-文本属性화방법
属性
| 属性 |
描述 |
| font |
设置或返回文本内容的当前字体属性 |
| textAlign |
设置或返回文本内容的当前对齐方式 |
| textBaseline |
设置或返回在绘制文本时使用的当前文本基线 |
描述 | |
| 글꼴 |
设置或返回文本内容的当前字体属性 |
| textAlign |
设置或返回文本内容的当前对齐方式 |
| textBaseline |
设置或返回在绘官文本时使用当前文本基线 |
| 方法 |
描述 |
| fillText() |
在画布上绘制"被填充的"文本 |
| strokeText() |
在画布上绘制文本（无填充） |
| measureText() |
返回包含指定文本宽度的对象 |
Canvas적API-图HTML5 캔버스 그리기용 그래픽 코드에 대한 자세한 설명绘제방법
방법
| 方法 |
描述 |
| drawImage() |
向画布上绘制图像、画布或视频 chrome不支持 |
描述 | |
| drawImage() |
向画布上绘图HTML5 캔버스 그리기용 그래픽 코드에 대한 자세한 설명、画布或视频 chrome不支持 |
Canvas의 API-이미지 素操작동법과 속성
属性
| 属性 |
描述 |
| width |
返回 ImageData 对象的宽度 |
| height |
返回 ImageData 对象的高度 |
| data |
返回一个对象，其包含指定的 ImageData 对象的图像数据 |
描述 | |
| 너비 |
返回 ImageData 对象적 크기 |
| 높이 |
返回 ImageData의 높은 높이 |
| 데이터 |
返回一个对象 ，其包含指 마음에 드는 ImageData 对象的图HTML5 캔버스 그리기용 그래픽 코드에 대한 자세한 설명数据 |
| 方法 |
描述 |
| createImageData() |
创建新的、空白的 ImageData 对象 |
| getImageData() |
返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 |
| putImageData() |
把图像数据（从指定的 ImageData 对象）放回画布上 |
Canvas의 API-이미지 합치기성
属性
| 属性 |
描述 |
| globalAlpha |
设置或返回绘图的当前 alpha 或透明值 |
| globalCompositeOperation |
设置或返回新图像如何绘制到已有的图像上 |
描述 | |
| globalAlpha |
设置或返回绘图的当前 alpha 或透明值 |
| globalCompositeOperation |
设置或返回new图HTML5 캔버스 그리기용 그래픽 코드에 대한 자세한 설명如何绘到已有的图HTML5 캔버스 그리기용 그래픽 코드에 대한 자세한 설명上 |
3. 간단한 캔버스 그리기
3.1캔버스 API연습 아아아아아3.2 그리는 과정
1. 캔버스 DOM 설정 및 가져오기
2. 그리기 환경 설정
var cxt=canvas.getContext('2d');
3. 새 경로
cxt.beginPath();
4. 브러시 너비 설정
cxt.lineWidth=10
5. 🎜>cxt.StrokeStyle= "#ff9900";
6. API에 따라 그리기7. 경로를 닫습니다cxt.closePath();
3.3 캔버스 숙제 - 행성의 움직임 <!doctype html><html>
<head></head>
<body>
<canvas width="500" height="800" style="background:yellow" id="canvas">
您的浏览器当前版本不支持canvas标签
</canvas>
<script>
//获取画布DOM 还不可以操作
var canvas=document.getElementById('canvas');
//alert(canvas);
//设置绘图环境
var cxt=canvas.getContext('2d');
//alert(cxt);
//画一条线段。
//开启新路径
cxt.beginPath();
//设定画笔的宽度
cxt.lineWidth=10;
//设置画笔的颜色
cxt.strokeStyle="#ff9900";
//设定笔触的位置
cxt.moveTo(20,20);
//设置移动的方式
cxt.lineTo(100,20);
//画线
cxt.stroke();
//封闭路径
cxt.closePath();
//画一个空心圆形
凡是路径图形必须先开始路径，画完图之后必须结束路径
//开始新路径
cxt.beginPath();
//重新设置画笔
cxt.lineWidth=3;
cxt.strokeStyle="green";
cxt.arc(200,200,50,0,360,false);
cxt.stroke();
//封闭新路径
cxt.closePath();
//画一个实心圆形
cxt.beginPath();
//设置填充的颜色
cxt.fillStyle="rgb(255,0,0)";
cxt.arc(200,100,50,0,360,false);
cxt.fill();
cxt.stroke();
cxt.closePath();
//画一个矩形
cxt.beginPath();
cxt.rect(300,20,100,100);
cxt.stroke();
cxt.closePath();
//其他方法 建议使用此方式
cxt.strokeRect(300,150,100,100)
//实心矩形
cxt.beginPath();
cxt.rect(300,270,100,100);
cxt.fill();
cxt.closePath();
//其他方法 建议使用此方式
cxt.fillRect(300,390,100,100);
//设置文字
cxt.font="40px 宋体";//css font属性
cxt.fillText("jingwhale",20,300);
//将笔触设置为1像素
cxt.lineWidth=1;
cxt.strokeText("jingwhale",20,350);
//画图 把一幅图片画到画布中 注意webkit内核的浏览器 chrome和猎豹不支持
var img =new Image();
img.src="xiaomm.jpg";
cxt.drawImage(img,20,370,230,306);
//画一个三角形
cxt.beginPath();
//移动至开始点
cxt.moveTo(300,500);
cxt.lineTo(300,600);
cxt.lineTo(400,550);
cxt.closePath();//填充或者画路径需要先闭合路径再画
cxt.stroke();
//实心三角形
cxt.beginPath();
//移动至开始点
cxt.moveTo(300,600);
cxt.lineTo(300,700);
cxt.lineTo(400,650);
cxt.closePath();
cxt.fill();
//旋转图片 图片
//设置旋转环境
cxt.save();
//在异次元空间重置0,0点的位置
cxt.translate(20,20);
//图片/形状旋转
//设置旋转角度 参数是弧度 角度 0-360 弧度=角度*Math.PI/180
cxt.rotate(-30*Math.PI/180);
//旋转一个线段
cxt.lineWidth=10;
cxt.beginPath();
cxt.moveTo(0,0);
cxt.lineTo(20,100);
cxt.stroke();
cxt.closePath();
//将旋转之后的元素放回原画布
cxt.restore();
//过程不可颠倒 先设置00点在旋转角度，然后画图
//旋转图片
cxt.save();
cxt.translate(20,370);
cxt.rotate(-10*Math.PI/180);
var img =new Image();
img.src="xiaomm.jpg";
cxt.drawImage(img,0,0,230,306);
cxt.restore();
</script>
</body></html>
시연 4. 캔버스 드로잉 예시-웹페이지 드로잉
1. 작화판 기능 분석
리본 영역(저장, 지우기)도구 영역(도형 및 도구)
속성 설정 영역(색상 및 선) 너비)
그리기 영역(캔버스 태그)
2. 기술 요구 사항 분석
페이지 레이아웃->HTML5 태그페이지 미화->CSS2
기능 설정->Javascript 프로그래밍
Canvas API->속성 설정, 선 그리기, 쓰기, 그리기, 캔버스 작업(삭제, 캔버스 정보 얻기),
다운로드->php 다운로드(JS는 로컬 파일 작업 불가)
3.간단한 캔버스 그리기
마우스 클릭 시작점 moveTo()를 준비할 때 플래그 비트를 설정합니다
마우스가 움직일 때
플래그 비트를 판단합니다. 값은 그림을 그리는 경우 true이고 false가 아닙니다. 그림을 그리려면
이동할 때 경로 lineTo()를 지정하고 획을 그립니다()
마우스를 떼거나 올리기
플래그 지우기
4. 온라인 드로잉 보드
해당 요소 개체 가져오기클릭 상태 설정
트리거 기능 설정
색상 속성 설정
선 너비 속성 설정
그림 모양 설정
도구 사양
5.html 구조적 부분:
6. 작화 기술 포인트 : 작화 전체를 마우스로 제어 이벤트
마우스 다운 이벤트-》 mousedown
마우스 이동 이벤트->mousemove
마우스 업 이벤트->mouseup
//获取canvas绘图环境
var context = document.getElementById('canvas').getContext('2d');
var time = 0;
//星球轨道
function drawTrack(){
for(var i = 0; i < 8; i++){
//开始路径
context.beginPath();
context.arc(500,500,(i+1)*50,0,360,false);
//关闭路径
context.closePath();
context.strokeStyle = '#fff';
context.stroke();
}
}
//执行以下此函数，画出各星球的轨道
drawTrack();
//星球 星球对象的构造方法 实例化后能画出所有的星球
function Star(x,y,radius,sColor,eColor,cycle){
//星球需要的哪些属性
//星球的坐标点
this.x = x;
this.y = y;
//星球的半径
this.radius = radius;
//星球的颜色
this.sColor = sColor;
this.eColor = eColor;
//公转周期
this.cycle = cycle;
//绘画出星球
this.draw = function(){ //异次元空间进行绘画
context.save();
//重设0,0坐标点
context.translate(500,500);
//设置旋转角度
context.rotate(time*360/this.cycle*Math.PI/180);
context.beginPath();
context.arc(this.x,this.y,this.radius,0,360,false);
context.closePath();
//星球的填充色(径向渐变 开始色和结束色)
this.color = context.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
this.color.addColorStop(0,this.sColor);
this.color.addColorStop(1,this.eColor);
context.fillStyle = this.color;
context.fill();
context.restore();
time +=1;
}
}
//各星球构造方法 从star中继承
function Sun(){
Star.call(this,0,0,20,'#f00','#f90',0);
}
function Mercury(){
Star.call(this,0,-50,10,'#A69697','#5C3E40',87.70);
}
function Venus(){
Star.call(this,0,-100,10,'#C4BBAC','#1F1315',224.701);
}
function Earth(){
Star.call(this,0,-150,10,'#78B1E8','#050C12',365.2422);
}
function Mars(){
Star.call(this,0,-200,10,'#CEC9B6','#76422D',686.98);
}
function Jupiter(){
Star.call(this,0,-250,10,'#C0A48E','#322222',4332.589);
}
function Saturn(){
Star.call(this,0,-300,10,'#F7F9E3','#5C4533',10759.5);
}
function Uranus(){
Star.call(this,0,-350,10,'#A7E1E5','#19243A',30799.095);
}
function Neptune(){
Star.call(this,0,-400,10,'#0661B2','#1E3B73',164.8*365);
}
//各星球对象的实例化
var sun = new Sun();
var water = new Mercury();
var gold = new Venus();
var diqiu = new Earth();
var fire = new Mars();
var wood = new Jupiter();
var soil = new Saturn();
var sky = new Uranus();
var sea = new Neptune();
function move(){
//清除画布
context.clearRect(0,0,1000,1000);
//重新绘制一遍轨道
drawTrack();
sun.draw();
water.draw();
gold.draw();
diqiu.draw();
fire.draw();
wood.draw();
soil.draw();
sky.draw();
sea.draw();
}
//星球围绕太阳运动起来
setInterval(move,100);//鼠标按下的时候-》设置开始点canvas.onmousedown=function(evt){//鼠标移动的时候-》不同的绘图（获取鼠标的位置）canvas.onmousemove=function(evt){}
| 